8000 forward props for Accordion by rossedfort · Pull Request #970 · temporalio/ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

forward props for Accordion #970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Dec 8, 2022
Merged

forward props for Accordion #970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d8079eb
forward props for Accordion
rossedfort Dec 2, 2022
ce4ba0d
rm data-cy
rossedfort Dec 2, 2022
bc6e153
revert moving files to subdirectory
rossedfort Dec 5, 2022
c69a7f7
Merge branch 'main' into accordion-prop-forwarding
rossedfort Dec 5, 2022
f20138d
Merge branch 'main' into accordion-prop-forwarding
rossedfort Dec 7, 2022
7d5d851
make accordion id prop optional
rossedfort Dec 7, 2022
e01ccce
format
rossedfort Dec 7, 2022
a5bdbcd
rm unnecessary ids
rossedfort Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
"just-debounce": "^1.1.0",
"sanitize-html": "^2.7.1",
"url-pattern": "^1.0.3",
"uuid": "^8.3.2",
"uuid": "^9.0.0",
"websocket-as-promised": "^2.0.1"
},
"devDependencies": {
Expand All @@ -67,6 +67,7 @@
"@types/base-64": "^1.0.0",
"@types/node": "^16.3.2",
"@types/sanitize-html": "^2.6.1",
"@types/uuid": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^5.28.0",
"@typescript-eslint/parser": "^5.28.0",
"@vitest/ui": "^0.16.0",
Expand Down
82 changes: 33 additions & 49 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 68 additions & 53 deletions src/lib/holocene/accordion.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,80 @@
import Icon from '$holocene/icon/icon.svelte';
import Badge from '$holocene/badge.svelte';
import type { IconName } from './icon/paths';
import type { HoloceneComponentProps } from 'src/types/holocene';
import { v4 } from 'uuid';

interface $$Props extends HoloceneComponentProps<'div'> {
title: string;
id?: string;
subtitle?: string;
icon?: IconName;
open?: boolean;
disabled?: boolean;
readOnly?: boolean;
error?: string;
}

export let title: string;
export let subtitle: string = '';
export let icon: IconName = null;
export let open: boolean = false;
export let disabled: boolean = false;
export let readOnly: boolean = false;
export let error: string = '';
export let id: string = v4();
export let subtitle = '';
export let icon = null;
export let open = false;
export let disabled = false;
export let readOnly = false;
export let error = '';

let className = '';
export { className as class };

$: open = disabled ? true : open;

const toggleAccordion = () => {
if (disabled || readOnly) return;
open = !open;
};
</script>

<section
class="flex w-full cursor-default flex-row rounded-lg border border-gray-300 bg-white p-8 text-primary {$$props.class}"
<div
class="flex w-full cursor-default flex-col rounded-lg border border-gray-300 bg-white p-8 text-primary {className}"
{...$$restProps}
>
<div class="w-full">
<div
class="accordion-open flex {!readOnly ? 'cursor-pointer' : ''} flex-col"
class:open
class:disabled
on:click={() => {
if (disabled || readOnly) return;
open = !open;
}}
>
<div class="space-between flex flex-row">
<h2 class="flex w-full items-center gap-2 text-lg font-medium">
{#if icon}<Icon name={icon} />{/if}
{title}
</h2>
<div class="mr-1" on:click|stopPropagation>
<slot name="action" />
</div>
{#if !readOnly}
<Icon
name={open ? 'chevron-up' : 'chevron-down'}
class={disabled ? 'text-gray-500' : 'text-primary'}
/>
{/if}
<button
id="{id}-trigger"
aria-expanded={open}
aria-controls="{id}-content"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use title here instead, but there is the risk that it won't be unique. We might want to think about creating a generic util to generate a unique id for use cases such as this.

Suggested change
aria-controls="{id}-content"
aria-controls="{title}-content"

Another approach could be to rework this to be a <li> inside of a <ul> and use the index + title for the id.

Ultimately, I think aria-expanded is the most important addition here 😅

class="accordion-open flex w-full flex-col"
disabled={disabled || readOnly}
on:click={toggleAccordion}
>
<div class="space-between flex w-full flex-row items-center">
<h2 class="flex w-full items-center gap-2 text-lg font-medium">
{#if icon}<Icon name={icon} />{/if}
{title}
</h2>
<div class="mr-1" on:click|stopPropagation on:keyup|stopPropagation>
<slot name="action" />
</div>
<h3 class="flex items-center">
{#if error} <Badge class="mr-2" type="error">{error}</Badge> {/if}
{subtitle}
</h3>
</div>
<div class="hidden w-full" class:content={open}>
<slot />
{#if !readOnly}
<Icon
name={open ? 'chevron-up' : 'chevron-down'}
class={disabled ? 'text-gray-500' : 'text-primary'}
/>
{/if}
</div>
<h3 class="flex items-center">
{#if error}
<Badge class="mr-2" type="error">{error}</Badge>
{/if}
{subtitle}
</h3>
</button>
<div
id="{id}-content"
aria-labelledby="{id}-trigger"
class="mt-8 block w-full"
class:hidden={!open}
>
<slot />
</div>
</section>

<style lang="postcss">
.open {
@apply mb-8;
}

.content {
@apply block;
}
.disabled {
@apply cursor-default;
}
</style>
</div>
7 changes: 7 additions & 0 deletions src/types/holocene.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export type HoloceneComponentProps<T extends keyof HTMLElementTagNameMap> =
svelte.JSX.HTMLProps<HTMLElementTagNameMap[T]> & DataAttributes;

export type DataAttributes = {
// [index: `data-${string}`]: any;
'data-cy'?: string;
};
0