Skip to content

Commit

Permalink
feat(ld-tabs): add parts
Browse files Browse the repository at this point in the history
  • Loading branch information
@renet
renet committed Oct 12, 2021
1 parent 97c7244 commit 79592fb
Show file tree
Hide file tree
Showing 6 changed files with 342 additions and 120 deletions.
17 changes: 9 additions & 8 deletions src/liquid/components/ld-tabs/ld-tab/ld-tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,20 @@ export class LdTab implements InnerFocusable {
render() {
return (
<button
ref={(el) => (this.btnRef = el as HTMLButtonElement)}
class="ld-tab"
role="tab"
aria-selected={this.selected ? 'true' : undefined}
aria-disabled={this.disabled ? 'true' : undefined}
aria-selected={this.selected ? 'true' : undefined}
class="ld-tab"
onClick={this.handleTabClick.bind(this)}
part="button"
ref={(el) => (this.btnRef = el as HTMLButtonElement)}
role="tab"
tabindex={this.selected ? undefined : '-1'}
>
<span class="ld-tab__spacer"></span>
<span class="ld-tab__content">
<slot></slot>
<span class="ld-tab__spacer" part="spacer start" />
<span class="ld-tab__content" part="content">
<slot />
</span>
<span class="ld-tab__spacer"></span>
<span class="ld-tab__spacer" part="spacer end" />
</button>
)
}
Expand Down
26 changes: 16 additions & 10 deletions src/liquid/components/ld-tabs/ld-tablist/ld-tablist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,20 +132,23 @@ export class LdTablist {
this.mode && `ld-tablist--${this.mode}`,
this.rounded && `ld-tablist--rounded-${this.rounded}`,
])}
part="wrapper"
>
<button
onClick={this.scroll.bind(this, 'left')}
ref={(el) => (this.btnScrollLeftRef = el)}
aria-disabled={this.scrollLeftEnabled ? undefined : 'true'}
class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left"
tabindex="-1"
hidden={!this.scrollable}
onClick={this.scroll.bind(this, 'left')}
part="arrow start"
ref={(el) => (this.btnScrollLeftRef = el)}
tabindex="-1"
>
<svg
width="16"
fill="none"
height="16"
part="arrow-icon start"
viewBox="0 0 16 16"
fill="none"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<title>Scroll left</title>
Expand All @@ -160,23 +163,26 @@ export class LdTablist {
</button>
<div
class="ld-tablist__scroll-container"
ref={(el) => (this.slotContainerRef = el)}
onScroll={this.updateScrollButtons.bind(this)}
part="scroll-container"
ref={(el) => (this.slotContainerRef = el)}
>
<slot></slot>
</div>
<button
onClick={this.scroll.bind(this, 'right')}
aria-disabled={this.scrollRightEnabled ? undefined : 'true'}
class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right"
tabindex="-1"
hidden={!this.scrollable}
onClick={this.scroll.bind(this, 'right')}
part="arrow end"
tabindex="-1"
>
<svg
width="16"
fill="none"
height="16"
part="arrow-icon end"
viewBox="0 0 16 16"
fill="none"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<title>Scroll right</title>
Expand Down
157 changes: 157 additions & 0 deletions src/liquid/components/ld-tabs/ld-tablist/test/__snapshots__/ld-tablist.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ld-tablist modifiers mode 1`] = `
<ld-tablist mode="ghost" role="tablist">
<mock:shadow-root>
<div class="ld-tablist ld-tablist--ghost" part="wrapper">
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left" hidden="" part="arrow start" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon start" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll left
</title>
<path d="M10 13L6 8L10 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<div class="ld-tablist__scroll-container" part="scroll-container">
<slot></slot>
</div>
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right" hidden="" part="arrow end" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon end" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll right
</title>
<path d="M6 13L10 8L6 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
</div>
</mock:shadow-root>
<ld-tab selected="">
<mock:shadow-root>
<button aria-selected="true" class="ld-tab" part="button" role="tab">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Fruits
</ld-tab>
<ld-tab>
<mock:shadow-root>
<button class="ld-tab" part="button" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Vegetables
</ld-tab>
</ld-tablist>
`;

exports[`ld-tablist modifiers rounded 1`] = `
<ld-tablist role="tablist" rounded="all-lg">
<mock:shadow-root>
<div class="ld-tablist ld-tablist--rounded-all-lg" part="wrapper">
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left" hidden="" part="arrow start" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon start" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll left
</title>
<path d="M10 13L6 8L10 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<div class="ld-tablist__scroll-container" part="scroll-container">
<slot></slot>
</div>
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right" hidden="" part="arrow end" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon end" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll right
</title>
<path d="M6 13L10 8L6 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
</div>
</mock:shadow-root>
<ld-tab selected="">
<mock:shadow-root>
<button aria-selected="true" class="ld-tab" part="button" role="tab">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Fruits
</ld-tab>
<ld-tab>
<mock:shadow-root>
<button class="ld-tab" part="button" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Vegetables
</ld-tab>
</ld-tablist>
`;

exports[`ld-tablist modifiers size 1`] = `
<ld-tablist role="tablist" size="sm">
<mock:shadow-root>
<div class="ld-tablist ld-tablist--sm" part="wrapper">
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--left" hidden="" part="arrow start" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon start" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll left
</title>
<path d="M10 13L6 8L10 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
<div class="ld-tablist__scroll-container" part="scroll-container">
<slot></slot>
</div>
<button aria-disabled="true" class="ld-tablist__btn-scroll ld-tablist__btn-scroll--right" hidden="" part="arrow end" tabindex="-1">
<svg fill="none" height="16" part="arrow-icon end" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<title>
Scroll right
</title>
<path d="M6 13L10 8L6 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
</button>
</div>
</mock:shadow-root>
<ld-tab selected="">
<mock:shadow-root>
<button aria-selected="true" class="ld-tab" part="button" role="tab">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Fruits
</ld-tab>
<ld-tab>
<mock:shadow-root>
<button class="ld-tab" part="button" role="tab" tabindex="-1">
<span class="ld-tab__spacer" part="spacer start"></span>
<span class="ld-tab__content" part="content">
<slot></slot>
</span>
<span class="ld-tab__spacer" part="spacer end"></span>
</button>
</mock:shadow-root>
Vegetables
</ld-tab>
</ld-tablist>
`;
48 changes: 48 additions & 0 deletions src/liquid/components/ld-tabs/ld-tablist/test/ld-tablist.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { newSpecPage } from '@stencil/core/testing'
import { LdTablist } from '../../ld-tablist/ld-tablist'
import { LdTab } from '../../ld-tab/ld-tab'

const components = [LdTablist, LdTab]

describe('ld-tablist', () => {
describe('modifiers', () => {
it('size', async () => {
const page = await newSpecPage({
components,
html: `
<ld-tablist size="sm">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
</ld-tablist>
`,
})
expect(page.root).toMatchSnapshot()
})

it('mode', async () => {
const page = await newSpecPage({
components,
html: `
<ld-tablist mode="ghost">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
</ld-tablist>
`,
})
expect(page.root).toMatchSnapshot()
})

it('rounded', async () => {
const page = await newSpecPage({
components,
html: `
<ld-tablist rounded="all-lg">
<ld-tab selected>Fruits</ld-tab>
<ld-tab>Vegetables</ld-tab>
</ld-tablist>
`,
})
expect(page.root).toMatchSnapshot()
})
})
})
Loading

0 comments on commit 79592fb

Please sign in to comment.