Skip to content

Commit

Permalink
Merge pull request #167 from appwrite/accordion-info
Browse files Browse the repository at this point in the history 
Collapsible
  • Loading branch information
@ArmanNik
ArmanNik authored May 15, 2024
2 parents a913bff + 281c28a commit 73d40b4
Show file tree
Hide file tree
Showing 7 changed files with 304 additions and 13 deletions.
6 changes: 6 additions & 0 deletions .changeset/polite-spoons-rescue.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@appwrite.io/pink-icons": minor
"@appwrite.io/pink": minor
---

Collapsible
181 changes: 181 additions & 0 deletions apps/kitchensink/billCollapseDemo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<!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 security demo</title>
</head>

<body>
<main class="grid-with-side" id="main">
{{> topNav}} {{> sideNav}}
<section class="main-content">
<div class="top-cover">
<div class="container">
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
<h1 class="heading-level-4"><span class="text">Users</span></h1>
</div>
<div class="tabs">
<ul class="tabs-list scroll-shadow-horizontal">
<li class="tabs-item">
<a class="tabs-button" href="#"
><span class="text">Users</span></a
>
</li>
<li class="tabs-item">
<a class="tabs-button" href="#"
><span class="text">Teams</span></a
>
</li>
<li class="tabs-item">
<a class="tabs-button" href="#"
><span class="text">Authentication</span></a
>
</li>
<li class="tabs-item">
<a class="tabs-button" href="#"
><span class="text">Usage</span></a
>
</li>
<li class="tabs-item">
<a class="tabs-button is-selected" href="#"
><span class="text">Security</span></a
>
</li>
</ul>
</div>
</div>
</div>
<div class="container u-margin-block-start-24">
<article class="card common-section">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
<h2 class="heading-level-6">Demo</h2>
<p>
Demo
</p>
</div>
<div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-32">
<ul class="collapsible u-width-full-line">
<li class="collapsible-item">
<div class="collapsible-wrapper">
<div class="collapsible-button u-gap-16">
<span class="body-text-2">Pro plan</span>
<div class="body-text-2 u-margin-inline-start-auto">$15.00</div>
</div>
</div>
</li>
<li class="collapsible-item is-info">
<details class="collapsible-wrapper">
<summary class="collapsible-button u-gap-16">
<span class="body-text-2 u-bold">Add-ons</span>
<span class="inline-tag">5</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
<div class="body-text-2 u-margin-inline-start-auto">$75.00</div>
</summary>
<div class="collapsible-content">
<ul>
<li class="u-flex-vertical u-gap-4 u-padding-block-8">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
<li class="u-flex-vertical u-gap-4 u-padding-block-8 u-sep-block-start">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
<li class="u-flex-vertical u-gap-4 u-padding-block-start-8 u-sep-block-start">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
</ul>
</div>
</details>
</li>
<li class="collapsible-item is-info">
<details class="collapsible-wrapper">
<summary class="collapsible-button u-gap-16">
<span class="body-text-2 u-bold">Add-ons</span>
<span class="inline-tag">5</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
<div class="body-text-2 u-margin-inline-start-auto">$75.00</div>
</summary>
<div class="collapsible-content">
<ul>
<li class="u-flex-vertical u-gap-4 u-padding-block-8">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
<li class="u-flex-vertical u-gap-4 u-padding-block-8 u-sep-block-start">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
<li class="u-flex-vertical u-gap-4 u-padding-block-start-8 u-sep-block-start">
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch">Additional members</h5>
<div>$15.00</div>
</div>
<div class="u-flex u-gap-4">
<h5 class="body-text-2 u-stretch u-color-text-offline">1</h5>
</div>
</li>
</ul>
</div>
</details>
</li>
<li class="collapsible-item">
<div class="collapsible-wrapper">
<div class="collapsible-button u-gap-4">
<span class="body-text-2">Current total (USD)</span>
<button class="tooltip u-cross-center" aria-label="variables info">
<span class="icon-info" aria-hidden="true"></span>
<span class="tooltip-popup" role="tooltip">
Set variables or secret keys.
</span>
</button>
<div class="body-text-2 u-margin-inline-start-auto">$130.00</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button disabled="" class="button" type="button">Update</button>
</div>
</article>
</div>
<footer class="main-footer"></footer>
</section>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions apps/kitchensink/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const config = {
auth: new URL("./auth.html", import.meta.url).pathname,
auth2: new URL("./auth2.html", import.meta.url).pathname,
teamActivity: new URL("./teamActivity.html", import.meta.url).pathname,
billCollapseDemo: new URL("./billCollapseDemo.html", import.meta.url).pathname,
bucket: new URL("./bucket.html", import.meta.url).pathname,
buckets: new URL("./buckets.html", import.meta.url).pathname,
bucketSettings: new URL("./bucketSettings.html", import.meta.url)
Expand Down
95 changes: 84 additions & 11 deletions apps/pink/src/pages/components/collapsible.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ In the Appwrite console, collapsibles can contain checkboxes:
<details class="collapsible-wrapper" open>
<summary class="collapsible-button">
<input type="checkbox" class="is-small" />
<span class="text">Advanced Options</span>
<span class="collapsible-button-optional">(optional)</span>
<span class="body-text-2 u-bold">Advanced Options</span>
<span class="inline-tag">2</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
Expand All @@ -94,7 +94,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
<ul class="form-list">
<li class="form-item">
<label class="choice-item">
<input type="checkbox" class="is-small" />
<input type="checkbox" class="is-small" checked />
<div class="choice-item-content">
<div class="choice-item-title">Subheading</div>
<p class="choice-item-paragraph">A clear description of what will happen if you select this option</p>
Expand All @@ -112,7 +112,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
</li>
<li class="form-item">
<label class="choice-item">
<input type="checkbox" class="is-small" />
<input type="checkbox" class="is-small" checked />
<div class="choice-item-content">
<div class="choice-item-title">Subheading</div>
<p class="choice-item-paragraph">A clear description of what will happen if you select this option</p>
Expand All @@ -128,7 +128,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
<details class="collapsible-wrapper">
<summary class="collapsible-button">
<input type="checkbox" class="is-small" />
<span class="text">Advanced Options</span>
<span class="body-text-2 u-bold">Advanced Options</span>
<span class="collapsible-button-optional">(optional)</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
Expand All @@ -140,11 +140,11 @@ In the Appwrite console, collapsibles can contain checkboxes:
</details>
</li>
<li class="collapsible-item">
<details class="collapsible-wrapper">
<summary class="collapsible-button">
<input type="checkbox" class="is-small" />
<span class="text">Advanced Options</span>
<span class="collapsible-button-optional">(optional)</span>
<details class="collapsible-wrapper is-disabled">
<summary class="collapsible-button" tabIndex="-1">
<input type="checkbox" class="is-small" disabled />
<span class="body-text-2 u-bold u-color-text-disabled">Advanced Options</span>
<span class="inline-tag is-disabled">2</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
Expand All @@ -166,7 +166,7 @@ In the Appwrite console, collapsibles can contain checkboxes:
<details class="collapsible-wrapper is-disabled">
<summary class="collapsible-button">
<input type="checkbox" class="is-small" disabled />
<span class="text u-color-text-disabled">Advanced Options</span>
<span class="body-text-2 u-bold u-color-text-disabled">Advanced Options</span>
<span class="inline-tag is-disabled">
<span class="text">4</span>
</span>
Expand All @@ -180,3 +180,76 @@ In the Appwrite console, collapsibles can contain checkboxes:
</ul>

</Preview>

## Collapsible with info items

<Preview>
<div class="card u-width-full-line">
<ul class="collapsible u-width-full-line">
<li class="collapsible-item is-info">
<details class="collapsible-wrapper">
<summary class="collapsible-button u-gap-16">
<div class="avatar is-size-small">
<span class="icon-question-mark-circle" aria-hidden="true"></span>
</div>
<span class="body-text-2 u-bold">Advanced Options</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
</summary>
<div class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2">
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
</div>
</details>
</li>
<li class="collapsible-item is-info">
<details class="collapsible-wrapper">
<summary class="collapsible-button u-gap-16">
<div class="avatar is-size-small">
<span class="icon-question-mark-circle" aria-hidden="true"></span>
</div>
<span class="body-text-2 u-bold">Advanced Options</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
</summary>
<div class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2">
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
</div>
</details>
</li>
<li class="collapsible-item is-info">
<details class="collapsible-wrapper">
<summary class="collapsible-button u-gap-16">
<div class="avatar is-size-small">
<span class="icon-question-mark-circle" aria-hidden="true"></span>
</div>
<span class="body-text-2 u-bold">Advanced Options</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
</summary>
<div class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2">
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
</div>
</details>
</li>
<li class="collapsible-item is-info">
<div class="collapsible-wrapper is-disabled">
<div class="collapsible-button u-gap-16">
<div class="avatar is-size-small">
<span class="icon-question-mark-circle" aria-hidden="true"></span>
</div>
<span class="body-text-2 u-bold">Advanced Options</span>
<div class="icon">
<span class="icon-cheveron-down" aria-hidden="true"></span>
</div>
</div>
<div class="collapsible-content u-padding-inline-start-48 u-padding-inline-end-32 u-margin-inline-start-2">
Collapsibles are used to display a vertical list of headers that reveal or hide content. They allow to progressively disclose information as desired.
</div>
</div>
</li>
</ul>
</div>
</Preview>
1 change: 1 addition & 0 deletions packages/ui/src/6-elements/_avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@
--p-text-size:var(--font-size-00); $size:pxToRem(32); --p-size:#{$size};
&.is-with-3-char { --p-text-size:#{pxToRem(10)}; }
[class*="icon"] { --p-text-size:var(--font-size-0); }
.icon-question-mark-circle { --p-text-size:var(--font-size-2); }
}
&.is-size-medium {
/* default */
Expand Down
Loading

0 comments on commit 73d40b4

Please sign in to comment.