Merge branch 'main' of https://github.com/appwrite/ui into style-upda…

…tes-for-release-1.4
appwrite · Nov 16, 2023 · 943e2c5 · 943e2c5
2 parents f4f343e + a2e9f11
commit 943e2c5
Show file tree

Hide file tree

Showing 35 changed files with 1,154 additions and 575 deletions.
diff --git a/.changeset/dirty-hounds-do.md b/.changeset/dirty-hounds-do.md
@@ -0,0 +1,6 @@
+---
+"@appwrite.io/pink-icons": patch
+"@appwrite.io/pink": patch
+---
+
+patch bump
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -19,6 +19,7 @@
     "ten-snakes-teach",
     "three-waves-cheer",
     "two-pans-shake",
-    "witty-bulldogs-repeat"
+    "witty-bulldogs-repeat",
+    "dirty-hounds-do"
   ]
 }
diff --git a/.github/workflows/alt-text-image.yml b/.github/workflows/alt-text-image.yml
@@ -0,0 +1,26 @@
+name: Accessibility-alt-text-bot
+on: 
+  issues:
+    types: [opened, edited]
+  pull_request:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+  discussion:
+    types: [created, edited]
+  discussion_comment:
+    types: [created, edited]
+
+permissions:
+  issues: write
+  pull-requests: write
+  discussions: write
+
+jobs:
+  accessibility_alt_text_bot:
+    name: Check alt text is set on issue or pull requests
+    runs-on: ubuntu-latest
+    if: ${{ github.event.issue || github.event.pull_request || github.event.discussion }}
+    steps:
+      - name: Get action 'github/accessibility-alt-text-bot'
+        uses: github/[email protected]
diff --git a/apps/kitchensink/cover-frame-2.html b/apps/kitchensink/cover-frame-2.html
diff --git a/apps/kitchensink/error-console-page.html b/apps/kitchensink/error-console-page.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@appwrite/kitchensink - user demo</title>
+  </head>
+
+  <body>
+    <main class="" id="main">
+      {{> topNav}}
+      <section class="main-content">
+        <div class="top-cover">
+          <div class="container">
+
+          </div>
+        </div>
+        <div class="container">
+          <div class="modal u-width-full-line u-margin-inline-auto u-margin-block-start-negative-168">
+            <form class="modal-form">
+              <header class="modal-header">
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                  <h4 class="modal-title heading-level-4">Organization not found</h4>
+                </div>
+              </header>
+              <div class="modal-content">
+                <p>The organization with the requested ID could not be found.</p>
+                <div class="u-flex u-margin-block-start-32 u-gap-16">
+                  <button class="button">
+                    <span class="text">Go to console</span>
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <footer class="main-footer"></footer>
+      </section>
+    </main>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/apps/kitchensink/error-not-found-modal.html b/apps/kitchensink/error-not-found-modal.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@appwrite/kitchensink</title>
+</head>
+
+<body>
+<div class="u-flex u-full-screen-height u-main-center u-cross-center">
+    <div class="modal">
+        <form class="modal-form" method="dialog">
+            <header class="modal-header">
+                <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                    <h4 class="modal-title heading-level-4">Missing Redirect URL </h4>
+                    <button class="button is-text is-small is-only-icon u-hide" aria-label="Close modal">
+                        <span class="icon-x" aria-hidden="true"></span>
+                    </button>
+                </div>
+            </header>
+            <div class="modal-content">
+                <p>Your Oauth sign in flow is missing a proper redirect URL. Send a request for a new session with a valid callback URL.</p>
+                <ul class="form-list">
+                    <li class="form-item">
+                        <label class="label u-block">Code</label>
+                        <code class="inline-code u-block u-width-fit-content u-margin-block-start-8">DEPLOYMENT_NOT_FOUND</code>
+                    </li>
+                </ul>
+                <div class="u-flex u-gap-16">
+                    <button class="button is-secondary">
+                        <span class="text">OAuth docs</span>
+                    </button>
+                    <button class="button">
+                        <span class="text">Go to console</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script type="module" src="/main.js"></script>
+</body>
+</html>
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
@@ -23,6 +23,7 @@ const config = {
         wizardForm: new URL("./wizard-form.html", import.meta.url).pathname,
         wizard11: new URL("./wizard-1-1.html", import.meta.url).pathname,
         coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
+        coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
         users: new URL("./users.html", import.meta.url).pathname,
         user: new URL("./user.html", import.meta.url).pathname,
         functions: new URL("./functions.html", import.meta.url).pathname,
@@ -39,6 +40,8 @@ const config = {
         gettingStarted: new URL("./getting-started.html", import.meta.url).pathname,
         modalDemo: new URL("./modal-demo.html", import.meta.url).pathname,
         filters: new URL("./filters.html", import.meta.url).pathname,
+        errorNotFoundModal: new URL("./error-not-found-modal.html", import.meta.url).pathname,
+        errorConsolePage: new URL("./error-console-page.html", import.meta.url).pathname,
       },
     },
   },

diff --git a/apps/pink/src/components/JoinCommunity.svelte b/apps/pink/src/components/JoinCommunity.svelte
@@ -22,7 +22,13 @@
   });
 
   function getAvatar(user: User) {
-    return `https://github.com/${user.username}.png`;
+    const url = new URL('https://cloud.appwrite.io/v1/avatars/image');
+    url.searchParams.set('project', 'console');
+    url.searchParams.set('width', '100');
+    url.searchParams.set('height', '100');
+    url.searchParams.set('url', `https://github.com/${user.username}.png`);
+
+    return url.toString();
   }
 
   function getUrl(user: User) {
@@ -62,7 +68,7 @@
 <ul id="join-community-users" class="u-margin-block-start-48">
   {#each shuffle(users) as user}
     <li>
-      <a class="avatar-link" href={getUrl(user)} target="_blank" rel="noreferrer">
+      <a class="avatar-link" href={getUrl(user)} target="_blank" rel="noopener noreferrer">
         <img
           class="avatar is-size-large u-drop-shadow-large"
           src={getAvatar(user)}

diff --git a/apps/pink/src/layouts/Layout.astro b/apps/pink/src/layouts/Layout.astro
@@ -99,19 +99,6 @@ const titleFallback = "Pink Design - Appwrite's Design System";
       data-domain="pink.appwrite.io"
       src="https://plausible.io/js/script.js"
     ></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-E4B1RRENQ6"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', 'G-E4B1RRENQ6');
-
-        if (window.navigator?.doNotTrack) {
-            if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes') {
-                window['ga-disable-G-E4B1RRENQ6'] = true;
-            }
-        }
-    </script>
   </head>
 
   <body>

diff --git a/apps/pink/src/pages/elements/loader.mdx b/apps/pink/src/pages/elements/loader.mdx
@@ -15,4 +15,21 @@ description: Use loaders to indicate to users that something is in progress and
 
 <Preview center>
     <div class="loader is-small"></div>
+</Preview>
+
+
+## Loading precent state
+Work different from the other rotate loaders.
+| State Class          | Type     |                                                 |
+| -------------------- | -------- | ----------------------------------------------- |
+| `is-loading`         | Loading  | Change behaving from rotating to loading        |
+
+| param                         | represents                                                                       | Example:                                           |
+| ----------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------- |
+| `--loading`                   | Loading precent                                                                  | `--loading: 65%;`                                  |
+| `-loader-bg-color-light`      | inner circle color (light-mode) that will fit background-color of the container  | `--loader-bg-color-light: var(--color-neutral-5);` |
+| `-loader-bg-color-dark`       | inner circle color (dark-mode) that will fit background-color of the container   | `--loader-bg-color-dark: var(--color-neutral-400);`|
+
+<Preview center>
+    <div class="loader is-loading" style="--loading:65%; --loader-bg-color-light:var(--color-neutral-5); --loader-bg-color-dark:var(--color-neutral-400);"></div>
 </Preview>
diff --git a/apps/pink/src/pages/elements/table.mdx b/apps/pink/src/pages/elements/table.mdx
@@ -291,6 +291,8 @@ In the Appwrite console, we use three styles of tables:
     </table>
 </Preview><br /><br /><br />
 
+## Remove Outer Style Table
+
 | Class                    | Type                 |                                                                                  |
 | ------------------------ | -------------------- | -------------------------------------------------------------------------------- |
 | `is-remove-outer-styles` | Without Outer Styles | Secondary table - in the Appwrite console used mostly inside a card or a wizard. |
@@ -384,10 +386,64 @@ In the Appwrite console, we use three styles of tables:
     </div>
   </section>
 </Preview>
+
+## Remove Outer Style Table - List with Table View
+
+<Preview center>
+    <section class="card">
+        <ul class="table is-remove-outer-styles u-sep-block-start">
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+            <li class="table-row">
+                <label class="table-col u-cursor-pointer">
+                    <div class="u-flex u-cross-center u-gap-8">
+                        <input class="is-small u-margin-inline-end-8" type="radio" name="a" />
+                        <div class="avatar is-size-x-small">
+                            <img src="/assets/node.234c8244.svg" alt="node" />
+                        </div>
+                        <div class="u-flex u-gap-8">
+                            <span class="text">repo-name</span>
+                            <time class="u-color-text-gray" datetime="2011-11-18T14:54:39.929">30m ago</time>
+                        </div>
+                    </div>
+                </label>
+            </li>
+        </ul>
+    </section>
+</Preview>
 <br />
 <br />
 <br />
 
+
+
+
 | Class              | Type         |                                                                                                      |
 | ------------------ | ------------ | ---------------------------------------------------------------------------------------------------- |
 | `is-sticky-scroll` | Inner Scroll | Used in case the content of a table exceeds the maximum width and the first column should be sticky. |