Skip to content
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

Apply BEM refactoring to quote and pagination #7117

Merged
merged 16 commits into from
Nov 29, 2024
Merged

Apply BEM refactoring to quote and pagination #7117

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0cba953
Apply BEM refactoring to quote
anicyne Nov 25, 2024
017b349
Apply BEM refactoring to pagination
anicyne Nov 25, 2024
a663102
Fix pagination css
anicyne Nov 26, 2024
921aa99
Restored host element
anicyne Nov 27, 2024
250d8ea
Fix test
anicyne Nov 27, 2024
20c0947
Merge branch 'develop' of https://github.com/public-ui/kolibri into 7…
anicyne Nov 27, 2024
6436b38
refactor quote and pagination
anicyne Nov 27, 2024
81e0a30
Fix visually-hidden
anicyne Nov 28, 2024
be82a42
Update all snapshots$
anicyne Nov 28, 2024
92a73cd
Merge branch 'develop' of https://github.com/public-ui/kolibri into 7…
anicyne Nov 28, 2024
8947f4c
Update all snapshots$
anicyne Nov 28, 2024
b47841a
Fix tests
anicyne Nov 28, 2024
25fe133
Merge branch '7036-bem-refactoring-quote-und-pagination' of https://g…
anicyne Nov 28, 2024
ba85194
Refactor pagination
anicyne Nov 28, 2024
f9a2ab5
Refactor pagination
anicyne Nov 29, 2024
f47b1ae
Refactor pagination
anicyne Nov 29, 2024
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
18 changes: 9 additions & 9 deletions packages/components/src/components/pagination/shadow.tsx
View file
Open in desktop
sdvg marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export class KolPagination implements PaginationAPI {
ellipsis = false;
return (
<li key={nonce()}>
<span class="separator" aria-hidden="true"></span>
<span class="kol-pagination__separator" aria-hidden="true"></span>
</li>
);
} else {
Expand All @@ -100,11 +100,11 @@ export class KolPagination implements PaginationAPI {
return (
<Host class="kol-pagination">
<nav aria-label={this.state._label}>
<ul class="navigation-list">
<ul class="kol-pagination__navigation-list">
{this.state._hasButtons.first && (
<li>
<KolButtonWcTag
class="first"
class="kol-pagination--first"
sdvg marked this conversation as resolved.
Show resolved Hide resolved
exportparts="icon"
_customClass={this.state._customClass}
_disabled={this.state._page <= 1}
Expand All @@ -119,7 +119,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.previous && (
<li>
<KolButtonWcTag
class="previous"
class="kol-pagination--previous"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={this.state._page <= 1}
Expand All @@ -135,7 +135,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.next && (
<li>
<KolButtonWcTag
class="next"
class="kol-pagination--next"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={count <= this.state._page}
Expand All @@ -150,7 +150,7 @@ export class KolPagination implements PaginationAPI {
{this.state._hasButtons.last && (
<li>
<KolButtonWcTag
class="last"
class="kol-pagination--last"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={count <= this.state._page}
Expand Down Expand Up @@ -318,7 +318,7 @@ export class KolPagination implements PaginationAPI {
}}
>
<span slot="expert">
<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
<span class="kol-pagination--visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
sdvg marked this conversation as resolved.
Show resolved Hide resolved
</span>
</KolButtonWcTag>
</li>
Expand All @@ -328,9 +328,9 @@ export class KolPagination implements PaginationAPI {
private getSelectedPageButton(page: number): JSX.Element {
return (
<li key={nonce()}>
<KolButtonWcTag class="selected" _customClass={this.state._customClass} _disabled={true} _label="">
<KolButtonWcTag class="kol-pagination--selected" _customClass={this.state._customClass} _disabled={true} _label="">
<span slot="expert">
<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
<span class="kol-pagination--visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
</span>
</KolButtonWcTag>
</li>
Expand Down
29 changes: 18 additions & 11 deletions packages/components/src/components/pagination/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import '../tooltip/style.scss';

@layer kol-component {
/* TODO. Wenn #7126 erledigt ist, :host-Block in .kol-pagination verschieben. */
sdvg marked this conversation as resolved.
Show resolved Hide resolved
:host {
align-items: center;
display: grid;
Expand All @@ -11,17 +12,23 @@
grid-template-columns: 1fr auto;
}

.navigation-list {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
margin: 0;
padding: 0;
}
.kol-pagination {
sdvg marked this conversation as resolved.
Show resolved Hide resolved
&__navigation-list {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
margin: 0;
padding: 0;
}

&__separator:before {
content: '•••';
}

.separator:before {
content: '•••';
&--visually-hidden {
@extend .visually-hidden;
}
}
}
18 changes: 9 additions & 9 deletions packages/components/src/components/pagination/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=0 _page=4
<kol-pagination class="kol-pagination">
<template shadowrootmode="open">
<nav aria-label="Label">
<ul class="navigation-list"></ul>
<ul class="kol-pagination__navigation-list"></ul>
</nav>
</template>
</kol-pagination>
Expand All @@ -14,17 +14,17 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1
<kol-pagination class="kol-pagination">
<template shadowrootmode="open">
<nav aria-label="Label">
<ul class="navigation-list">
<ul class="kol-pagination__navigation-list">
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="first" exportparts="icon"></kol-button-wc>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination--first" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="previous" exportparts="icon"></kol-button-wc>
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination--previous" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _label="" class="selected">
<kol-button-wc _disabled="" _label="" class="kol-pagination--selected">
<span slot="expert">
<span class="visually-hidden">
<span class="kol-pagination--visually-hidden">
kol-page
</span>
1
Expand All @@ -34,18 +34,18 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1
<li>
<kol-button-wc _label="" exportparts="icon">
<span slot="expert">
<span class="visually-hidden">
<span class="kol-pagination--visually-hidden">
kol-page
</span>
2
</span>
</kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="next" exportparts="icon"></kol-button-wc>
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination--next" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="last" exportparts="icon"></kol-button-wc>
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination--last" exportparts="icon"></kol-button-wc>
</li>
</ul>
</nav>
Expand Down
57 changes: 26 additions & 31 deletions packages/components/src/components/quote/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';
import { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';
import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
import { Component, h, Prop, State, Watch } from '@stencil/core';

import type { JSX } from '@stencil/core';
import { KolLinkTag } from '../../core/component-names';
import clsx from 'clsx';
@Component({
tag: 'kol-quote',
styleUrls: {
Expand Down Expand Up @@ -78,36 +79,30 @@ export class KolQuote implements QuoteAPI {
public render(): JSX.Element {
const hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label
return (
<Host class="kol-quote">
<figure
class={{
[this.state._variant]: true,
}}
>
{this.state._variant === 'block' ? (
<blockquote cite={this.state._href}>
{this.state._quote}
<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>
<slot name="expert" />
</span>
</blockquote>
) : (
<q cite={this.state._href}>
{this.state._quote}
<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>
<slot name="expert" />
</span>
</q>
)}
{typeof this.state._label === 'string' && this.state._label.length > 0 && (
<figcaption>
<cite>
<KolLinkTag _href={this.state._href} _label={this.state._label} _target="_blank" />
</cite>
</figcaption>
)}
</figure>
</Host>
<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>
{this.state._variant === 'block' ? (
<blockquote class="kol-quote__blockquote" cite={this.state._href}>
{this.state._quote}
<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>
<slot name="expert" />
</span>
</blockquote>
) : (
<q class="kol-quote__quote" cite={this.state._href}>
{this.state._quote}
<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>
<slot name="expert" />
</span>
</q>
)}
{typeof this.state._label === 'string' && this.state._label.length > 0 && (
<figcaption class="kol-quote__figcaption">
<cite class="kol-quote__cite">
<KolLinkTag _href={this.state._href} _label={this.state._label} _target="_blank" />
</cite>
</figcaption>
)}
</figure>
);
}
}
50 changes: 29 additions & 21 deletions packages/components/src/components/quote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,43 @@
@import '../style';

@layer kol-component {
:host {
.kol-quote {
$root: &;
font-size: rem(16);
}

cite,
figure,
q + figcaption {
display: inline;
margin: 0;
padding: 0;
}

blockquote:before {
content: open-quote;
}
&__cite {
&::before {
content: '—';

blockquote::after {
content: close-quote;
}
@at-root #{$root}--block & {
padding-right: 0.5em;
}

cite:before {
content: '—';
}
@at-root #{$root}--inline & {
padding: 0.5em;
}
}
}

.block cite:before {
padding-right: 0.5em;
}
&__figcaption {
@at-root #{$root}--block & {
display: inline;
margin: 0;
padding: 0;
}
}

&__blockquote {
&::before {
content: open-quote;
}

.inline cite:before {
padding: 0.5em;
&::after {
content: close-quote;
}
}
}
}
30 changes: 15 additions & 15 deletions packages/components/src/components/quote/test/__snapshots__/snapshot.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`kol-quote should render with _label="Caption" _href="https://example.com" _quote="Text of the Quote" _variant="block" 1`] = `
<kol-quote class="kol-quote">
<kol-quote>
<template shadowrootmode="open">
<figure class="block">
<blockquote cite="https://example.com">
<figure class="kol-quote kol-quote--block">
<blockquote cite="https://example.com" class="kol-quote__blockquote">
Text of the Quote
<span aria-hidden="true" hidden="">
<slot name="expert"></slot>
</span>
</blockquote>
<figcaption>
<cite>
<figcaption class="kol-quote__figcaption">
<cite class="kol-quote__cite">
<kol-link _href="https://example.com" _label="Caption" _target="_blank"></kol-link>
</cite>
</figcaption>
Expand All @@ -21,17 +21,17 @@ exports[`kol-quote should render with _label="Caption" _href="https://example.co
`;

exports[`kol-quote should render with _label="Caption" _href="https://example.com" _quote="Text of the Quote" _variant="inline" 1`] = `
<kol-quote class="kol-quote">
<kol-quote>
<template shadowrootmode="open">
<figure class="inline">
<q cite="https://example.com">
<figure class="kol-quote kol-quote--inline">
<q cite="https://example.com" class="kol-quote__quote">
Text of the Quote
<span aria-hidden="true" hidden="">
<slot name="expert"></slot>
</span>
</q>
<figcaption>
<cite>
<figcaption class="kol-quote__figcaption">
<cite class="kol-quote__cite">
<kol-link _href="https://example.com" _label="Caption" _target="_blank"></kol-link>
</cite>
</figcaption>
Expand All @@ -41,17 +41,17 @@ exports[`kol-quote should render with _label="Caption" _href="https://example.co
`;

exports[`kol-quote should render with _label="Caption" _href="https://example.com" _quote="Text of the Quote" 1`] = `
<kol-quote class="kol-quote">
<kol-quote>
<template shadowrootmode="open">
<figure class="inline">
<q cite="https://example.com">
<figure class="kol-quote kol-quote--inline">
<q cite="https://example.com" class="kol-quote__quote">
Text of the Quote
<span aria-hidden="true" hidden="">
<slot name="expert"></slot>
</span>
</q>
<figcaption>
<cite>
<figcaption class="kol-quote__figcaption">
<cite class="kol-quote__cite">
<kol-link _href="https://example.com" _label="Caption" _target="_blank"></kol-link>
</cite>
</figcaption>
Expand Down
Loading
Loading