Merge pull request #1248 from dpc-sdp/feature/R20-1459-bullet-points

[R20-1459] padding update, remove circle support

packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts

@@ -16,6 +16,7 @@ const markup = {
   image: `<div class="embedded-entity--media--image"><img src="https://example.com/image.jpg" alt="Image" title="Image" width="100" height="100"></div>`,
   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>`
 }
 
@@ -68,6 +69,7 @@ const fixed = {
   image: `<figure><img src="https://example.com/image.jpg" class="rpl-img" width="100" alt="Image" srcset="https://example.com/image.jpg?width=720, https://example.com/image.jpg?width=1440 2x"></figure>`,
   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>`
 }
 

packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts

@@ -248,6 +248,32 @@ const pluginLinks = function (this: any) {
   })
 }
 
+const pluginLists = function (this: any) {
+  this.find('ul[type], ol[type]').map((i: any, el: any) => {
+    const $list = this.find(el)
+    const type = $list.attr('type')
+
+    const listTypes = {
+      1: 'decimal',
+      a: 'lower-latin',
+      A: 'upper-latin',
+      i: 'lower-roman',
+      I: 'upper-roman',
+      disc: 'disc',
+      square: 'square',
+      circle: 'disc' // circles selection uses disc (a11y request)
+    }
+
+    $list.removeAttr('type')
+
+    if (listTypes[type]) {
+      $list.addClass(`rpl-type-list-${el?.name}--${listTypes[type]}`)
+    }
+
+    return $list
+  })
+}
+
 const pluginIFrames = function (this: any) {
   this.find('iframe').map((i: any, el: any) => {
     const $iframe = this.find(el)
@@ -277,5 +303,6 @@ export default [
   pluginImages,
   pluginButtons,
   pluginLinks,
+  pluginLists,
   pluginIFrames
 ]

packages/ripple-ui-core/src/styles/utilities/_lists.css

@@ -12,25 +12,29 @@
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
   margin-left: var(--rpl-sp-4);
-  padding-left: var(--rpl-sp-4);
+  padding-left: var(--rpl-sp-5);
 
   @media (--rpl-bp-l) {
     margin-left: var(--rpl-sp-5);
   }
 
-  &[type='i'] {
+  &.rpl-type-list-ol--decimal {
+    list-style-type: decimal;
+  }
+
+  &.rpl-type-list-ol--lower-roman {
     list-style-type: lower-roman;
   }
 
-  &[type='I'] {
+  &.rpl-type-list-ol--upper-roman {
     list-style-type: upper-roman;
   }
 
-  &[type='a'] {
+  &.rpl-type-list-ol--lower-latin {
     list-style-type: lower-latin;
   }
 
-  &[type='A'] {
+  &.rpl-type-list-ol--upper-latin {
     list-style-type: upper-latin;
   }
 
@@ -80,18 +84,22 @@
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
   margin-left: var(--rpl-sp-4);
-  padding-left: var(--rpl-sp-4);
+  padding-left: var(--rpl-sp-5);
   list-style-type: disc;
 
   @media (--rpl-bp-l) {
     margin-left: var(--rpl-sp-5);
   }
 
-  &[type='circle'] {
+  &.rpl-type-list-ul--disc {
+    list-style-type: disc;
+  }
+
+  &.rpl-type-list-ul--circle {
     list-style-type: circle;
   }
 
-  &[type='square'] {
+  &.rpl-type-list-ul--square {
     list-style-type: square;
   }