Skip to content

Commit

Permalink
Merge pull request #2681 from evidence-dev/fix/2675-docs-tabs
Browse files Browse the repository at this point in the history 
Fix/2675 docs tabs
  • Loading branch information
@kwongz
kwongz authored Nov 13, 2024
2 parents 1ee19fb + 61342f4 commit 844d238
Show file tree
Hide file tree
Showing 47 changed files with 3,523 additions and 2,105 deletions.
5 changes: 5 additions & 0 deletions .changeset/twelve-news-play.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@evidence-dev/core-components': patch
---

Updated core components for docTabs
19 changes: 2 additions & 17 deletions packages/ui/core-components/src/lib/unsorted/ui/CodeBlock.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</script>

<script>
import { onMount, tick } from 'svelte';
import { tick } from 'svelte';
import { browser } from '$app/environment';
import { loadPrismComponents } from './prismLoader.js'; // Needed to avoid issues with loading Prism and prism languages out of order
Expand All @@ -29,21 +29,6 @@
}
}
onMount(async () => {
const Prism = await loadPrismComponents();
if (typeof Prism !== 'undefined') {
await tick();
const codeElements = document.querySelectorAll(
`pre code${language ? `.language-${language}` : ''}`
);
codeElements.forEach((codeElement) => {
Prism.highlightElement(codeElement, false);
});
} else {
console.error('Prism is not defined on mount');
}
});
$: if (browser) {
tick().then(async () => {
const Prism = await loadPrismComponents();
Expand Down Expand Up @@ -79,7 +64,7 @@
{/if}
</button>
{/if}
<pre class="overflow-auto pretty-scrollbar"><code class="language-{language} text-sm"
<pre class="overflow-auto pretty-scrollbar my-[0.5em]"><code class="language-{language} text-sm"
>{#if source}{source}{:else}<slot />{/if}</code
></pre>
</div>
70 changes: 70 additions & 0 deletions sites/docs/components/DocTab.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<script>
import { cubicInOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';
let activeTab = 'preview';
const tabs = ['preview', 'code'];
let tabButtons = [];
function setTab(tab, index) {
activeTab = tab;
updateActiveBorder(index);
}
const [send, receive] = crossfade({
duration: 200,
easing: cubicInOut
});
</script>

<div class="doc-tab mt-2">
<div class="flex justify-end">
<div class="flex gap-1 bg-gray-100 rounded-md p-1 shadow-inner">
{#each tabs as tab, index}
<div class="relative">
<button
class="relative z-10 py-1 px-2 transition-colors duration-300 text-xs font-medium ease-in-out capitalize tracking-wide focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400 rounded-md hover:text-gray-950 {activeTab ===
tab
? 'text-gray-950'
: 'text-gray-600'}"
on:click={() => setTab(tab, index)}
bind:this={tabButtons[index]}
>
{tab}
</button>
{#if activeTab === tab}
<div
class="absolute bottom-0 left-0 w-full h-full rounded border bg-white shadow-sm z-0"
in:send={{ key: 'trigger' }}
out:receive={{ key: 'trigger' }}
/>
{/if}
</div>
{/each}
</div>
</div>

<!-- Preview and code tabs -->
<div>
<div
class={activeTab !== 'preview' ? 'h-[0px]' : 'mb-3 mt-2'}
class:invisible={activeTab !== 'preview'}
>
<slot name="preview" />
</div>
<div
class="overflow-auto md-preview {activeTab !== 'code' ? 'h-[0px]' : 'mt-2'}"
class:invisible={activeTab !== 'code'}
>
<slot />
</div>
</div>
</div>

<style>
/* Styles codeblocks inside doctabs */
:global(.md-preview > div:first-of-type) {
margin: 0;
}
</style>
229 changes: 121 additions & 108 deletions sites/docs/pages/components/accordion/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,113 +3,123 @@ title: Accordion
sidebar_position: 1
---

<Accordion>
<AccordionItem title="Item 1">
<DocTab>
<div slot='preview'>
<Accordion>
<AccordionItem title="Item 1">

This is the first item's accordion body.
This is the first item's accordion body.

You can use **markdown** here too!
You can use **markdown** here too!

Make sure to include an empty line after the component if you want to use markdown.
Make sure to include an empty line after the component if you want to use markdown.

</AccordionItem>
<AccordionItem title="Item 2">
</AccordionItem>
<AccordionItem title="Item 2">

This is the second item's accordion body with <b>bold text</b>.
This is the second item's accordion body with <b>bold text</b>.

</AccordionItem>
<AccordionItem title="Item 3">
</AccordionItem>
<AccordionItem title="Item 3">

This is the third item's accordion body.
This is the third item's accordion body.

</AccordionItem>
</Accordion>
</AccordionItem>
</Accordion>
</div>

```markdown
<Accordion>
<AccordionItem title="Item 1">

```markdown
<Accordion>
<AccordionItem title="Item 1">
This is the first item's accordion body.

This is the first item's accordion body.
You can use **markdown** here too!

You can use **markdown** here too!
Make sure to include an empty line after the component if you want to use markdown.
Make sure to include an empty line after the component if you want to use markdown.

</AccordionItem>
<AccordionItem title="Item 2">
</AccordionItem>
<AccordionItem title="Item 2">

This is the second item's accordion body with <b>bold text</b>.
This is the second item's accordion body with <b>bold text</b>.

</AccordionItem>
<AccordionItem title="Item 3">
</AccordionItem>
<AccordionItem title="Item 3">

This is the third item's accordion body.
This is the third item's accordion body.

</AccordionItem>
</Accordion>
```
</AccordionItem>
</Accordion>
```
</DocTab>

## Examples

### Single Accordion

<Accordion single>
<AccordionItem title="Item 1">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>

```markdown
<Accordion single>
<AccordionItem title="Item 1">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>

```
<DocTab>
<div slot="preview">
<Accordion single>
<AccordionItem title="Item 1">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>
</div>

```markdown
<Accordion single>
<AccordionItem title="Item 1">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>
```
</DocTab>

### Overriding Styles

Use the `class` options to override the styles on the accordion.

<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
<AccordionItem title="Item 1" class="border-none">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2" class="border-none">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3" class="border-none">
<p>Content 3</p>
</AccordionItem>
</Accordion>

```markdown
<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
<AccordionItem title="Item 1" class="border-none">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2" class="border-none">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3" class="border-none">
<p>Content 3</p>
</AccordionItem>
</Accordion>

```
<DocTab>
<div slot='preview'>
<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
<AccordionItem title="Item 1" class="border-none">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2" class="border-none">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3" class="border-none">
<p>Content 3</p>
</AccordionItem>
</Accordion>
</div>

```markdown
<Accordion class="rounded-xl bg-gray-50 px-4 mt-4">
<AccordionItem title="Item 1" class="border-none">
<p>Content 1</p>
</AccordionItem>
<AccordionItem title="Item 2" class="border-none">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3" class="border-none">
<p>Content 3</p>
</AccordionItem>
</Accordion>
```
</DocTab>

### Title Slot

Expand All @@ -120,34 +130,37 @@ Pass components into the accordion title by using the slot `title`.
select 0.366 as positive, -0.366 as negative
```

<Accordion>
<AccordionItem title="Item 1">
<span slot='title'>Custom Title <Value chip data={growth} fmt=pct1 /></span>
Content 1
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>

```markdown
<Accordion>
<AccordionItem title="Item 1">
<span slot='title'>Custom Title <Value data={growth} fmt=pct1 /></span>
Content 1
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>
```
<DocTab>
<div slot="preview">
<Accordion>
<AccordionItem title="Item 1">
<span slot='title'>Custom Title <Value chip data={growth} fmt=pct1 /></span>
Content 1
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>
</div>

```markdown
<Accordion>
<AccordionItem title="Item 1">
<span slot='title'>Custom Title <Value data={growth} fmt=pct1 /></span>
Content 1
</AccordionItem>
<AccordionItem title="Item 2">
<p>Content 2</p>
</AccordionItem>
<AccordionItem title="Item 3">
<p>Content 3</p>
</AccordionItem>
</Accordion>
```
</DocTab>



Expand Down
Loading

0 comments on commit 844d238

Please sign in to comment.