Skip to content

Commit

Permalink
Apply BEM refactoring to quote and pagination (#7117)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdvg
sdvg authored Nov 29, 2024
2 parents 8c87985 + f47b1ae commit a328c84
Show file tree
Hide file tree
Showing 10 changed files with 183 additions and 181 deletions.
14 changes: 7 additions & 7 deletions packages/components/src/components/pagination/shadow.tsx
View file
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__button kol-pagination__button--first"
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__button kol-pagination__button--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__button kol-pagination__button--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__button kol-pagination__button--last"
exportparts="icon"
_customClass={this.state._customClass}
_disabled={count <= this.state._page}
Expand Down Expand Up @@ -328,7 +328,7 @@ 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__button kol-pagination__button--selected" _customClass={this.state._customClass} _disabled={true} _label="">
<span slot="expert">
<span class="visually-hidden">{translate('kol-page')}</span> {NUMBER_FORMATTER.format(page)}
</span>
Expand Down
25 changes: 14 additions & 11 deletions packages/components/src/components/pagination/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import '../tooltip/style.scss';

@layer kol-component {
/* TODO. Once #7126 is completed, move :host block into .kol-pagination */
:host {
align-items: center;
display: grid;
Expand All @@ -11,17 +12,19 @@
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 {
&__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: '•••';
}
}
}
14 changes: 7 additions & 7 deletions packages/components/src/components/pagination/test/__snapshots__/snapshot.spec.tsx.snap
View file
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,15 +14,15 @@ 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__button kol-pagination__button--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__button kol-pagination__button--previous" exportparts="icon"></kol-button-wc>
</li>
<li>
<kol-button-wc _disabled="" _label="" class="selected">
<kol-button-wc _disabled="" _label="" class="kol-pagination__button kol-pagination__button--selected">
<span slot="expert">
<span class="visually-hidden">
kol-page
Expand All @@ -42,10 +42,10 @@ exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1
</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__button kol-pagination__button--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__button kol-pagination__button--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
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
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
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

0 comments on commit a328c84

Please sign in to comment.