Skip to content

Commit

Permalink
Merge pull request #1259 from dpc-sdp/feature/rtl-tables
Browse files Browse the repository at this point in the history
[R20-2065][R20-2066] aligned table content
  • Loading branch information
dylankelly authored Jul 19, 2024
2 parents d985727 + 63766f5 commit f0c0033
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const markup = {
button: `<a class="button" href="https://example.com">Button</a>`,
link: `<a href="https://example.com" target="_blank">Link</a>`,
list: `<ul type="disc"><li>List item</li></ul><ul type="circle"><li>List item</li></ul><ul type="square"><li>List item</li></ul><ol type="i"><li>List item</li></ol><ol type="I"><li>List item</li></ol><ol type="a"><li>List item</li></ol><ol type="A"><li>List item</li></ol>`,
iframe: `<iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>`
iframe: `<iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>`,
alignment: `<p class="text-align-left">Left</p><p class="text-align-center">Center</p><p class="text-align-right">Right</p>`
}

const fixed = {
Expand Down Expand Up @@ -70,7 +71,8 @@ const fixed = {
button: `<a class="rpl-button rpl-button--default rpl-u-focusable-block rpl-button--filled" href="https://example.com"><span class="rpl-button__label rpl-type-label rpl-type-weight-bold">Button</span></a>`,
link: `<a href="https://example.com" target="_blank" class="rpl-text-link rpl-u-focusable-inline">Link<span class="rpl-u-visually-hidden">(opens in a new window)</span></a>`,
list: `<ul class="rpl-type-list-ul--disc"><li>List item</li></ul><ul class="rpl-type-list-ul--disc"><li>List item</li></ul><ul class="rpl-type-list-ul--square"><li>List item</li></ul><ol class="rpl-type-list-ol--lower-roman"><li>List item</li></ol><ol class="rpl-type-list-ol--upper-roman"><li>List item</li></ol><ol class="rpl-type-list-ol--lower-latin"><li>List item</li></ol><ol class="rpl-type-list-ol--upper-latin"><li>List item</li></ol>`,
iframe: `<div class="rpl-iframe rpl-iframe--default rpl-iframe--auto"><iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>`
iframe: `<div class="rpl-iframe rpl-iframe--default rpl-iframe--auto"><iframe src="https://powerbi.com" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>`,
alignment: `<p class="rpl-u-text-left">Left</p><p class="rpl-u-text-center">Center</p><p class="rpl-u-text-right">Right</p>`
}

describe('ripple-tide-api/utils/markup-transpiler/cheerio', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,25 @@ const pluginIFrames = function (this: any) {
})
}

const pluginTextAlign = function (this: any) {
this.find('.text-align-left, .text-align-center, .text-align-right').map(
(i: any, el: any) => {
const $el = this.find(el)
const alignments = ['left', 'center', 'right']

alignments.forEach((alignment) => {
if ($el.hasClass(`text-align-${alignment}`)) {
$el
.removeClass(`text-align-${alignment}`)
.addClass(`rpl-u-text-${alignment}`)
}
})

return $el
}
)
}

export default [
pluginTables,
pluginCallout,
Expand All @@ -311,5 +330,6 @@ export default [
pluginButtons,
pluginLinks,
pluginLists,
pluginIFrames
pluginIFrames,
pluginTextAlign
]
17 changes: 16 additions & 1 deletion packages/ripple-ui-core/src/styles/components/_table.css
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
th,
td {
vertical-align: top;

> *:first-child {
margin-top: 0;
}
}

caption {
Expand All @@ -76,7 +80,6 @@
caption,
th,
td {
text-align: left;
padding: var(--rpl-sp-4) var(--rpl-sp-3);

&:first-child {
Expand All @@ -88,6 +91,11 @@
}
}

caption:not([align]),
th:not([align]) {
text-align: left;
}

tbody {
tr:nth-child(odd) {
background-color: var(--local-table-row-background);
Expand Down Expand Up @@ -140,3 +148,10 @@
}
}
}

[dir='rtl'] .rpl-table {
caption:not([align]),
th:not([align]) {
text-align: right;
}
}
12 changes: 12 additions & 0 deletions packages/ripple-ui-core/src/styles/utilities/_typography.css
Original file line number Diff line number Diff line change
Expand Up @@ -305,3 +305,15 @@ html {
.rpl-u-hyphenate {
hyphens: auto;
}

.rpl-u-text-left {
text-align: left;
}

.rpl-u-text-center {
text-align: center;
}

.rpl-u-text-right {
text-align: right;
}

0 comments on commit f0c0033

Please sign in to comment.