@madgex/design-system 7.0.0 → 7.0.2

package/src/components/popover/README.md

@@ -1,6 +1,4 @@
-## Nunjucks
-
-### Parameters
+## Parameters
 
 - `id`: id of the trigger - **required**,
 - `text`: text you want on the trigger - **required**,
@@ -13,32 +11,11 @@ Default is `top-end`.
 
 Note: If there is not enough space for the popover to fit at a certain position, it will move to the opposite side.
 
-### Accessibility
+## Accessibility
 
 When javascript is enabled, the trigger uses `aria-expanded="false/true"` and there is an `aria-hidden="true"` set on the popover when it is not active.
 If javascript is not enabled, the content of the popover just shows.
 
-### Note
+## Note
 
 We are using the Popper.js library (https://github.com/popperjs/popper.js) to help with the positioning. More details here (https://popper.js.org/)
-
-## Vue
-
-### Slots
-
-- `default <slot/>`: Content for nested trigger `<MdsButton />`
-- `#content <slot/>`: Content for the popover.
-
-### Props
-
-- `id`: `String` **required** - `id` attribute of the trigger.
-- `classes`: `String, Object, Array` _optional_ - Add extra classes to the trigger. No default.
-- `placement`: `String` _optional_ - placement of the popover. Default: `'top-end'`.
-
-### Notes
-
-Install `@popperjs/core` if you need this component.
-
-```
-npm i @popperjs/core
-```

package/src/components/tabs/tabs.config.js

@@ -23,7 +23,7 @@ module.exports = {
         label: 'Next week',
         id: 'next-week',
         content: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
-        contentClasses: 'mds-edited-text',
+        contentClasses: 'mds-prose',
       },
       {
         label: 'Next month',
@@ -77,7 +77,7 @@ module.exports = {
             label: 'Seagulls',
             headerText: 'Latest News about Seagulls',
             content: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
-            contentClasses: 'mds-edited-text',
+            contentClasses: 'mds-prose',
           },
         ],
       },

package/src/components/toggle-button-links/README.md

@@ -2,20 +2,9 @@ Mainly used for sort options, when there are 2 options.
 
 Although the component supports more than 2 options, we strongly suggest only using this component if there are 2 options. Any more and you should use `MdsSelect` instead.
 
-## Nunjucks
-
 ### Parameters
 
 - `id`: required id
 - `i18n`: object e.g `{label: 'Sort by:'}`
 - `options`: Array of objects, e.g. `[{href:'https://madgex.com/my-link1', label: 'My Link 1'}, {href:'https://madgex.com/my-link2', label: 'My Link 2'}]`
 - `activeHref`: `href` to match to above option.href, which will denote the `active` buttonLink
-
-## Vue
-
-### Props
-
-- `id`: required id
-- `i18n`: object e.g `{label: 'Sort by:'}`
-- `options`: Array of objects, e.g. `[{href:'https://madgex.com/my-link1', label: 'My Link 1'}, {href:'https://madgex.com/my-link2', label: 'My Link 2'}]`
-- `:modelValue/v-model`: `href` or `to` object to match to above option.href or option.to, which will denote the `active` buttonLink

package/src/helpers/prose/README.md

@@ -0,0 +1,7 @@
+## Helpers
+
+Use the class `mds-prose` to normalise the text coming from a WYSIWYG editor,
+this should only be used when content from a WYSIWYG editor is displayed.
+
+ul, ol tags will have the style that has been removed in css-reset.
+The line-height and paragraph margin-bottom have been increased to improve readability.

package/src/helpers/{edited-text/edited-text.js → prose/prose.js}

@@ -1,8 +1,6 @@
-const editedText = {
+const prose = {
   setFluidVideos: () => {
-    const elements = Array.from(
-      document.querySelectorAll('.mds-edited-text iframe, .mds-edited-text embed, .mds-edited-text object')
-    );
+    const elements = Array.from(document.querySelectorAll('.mds-prose iframe, .mds-prose embed, .mds-prose object'));
 
     elements.forEach((element) => {
       const newHtml = document.createElement('div');
@@ -14,4 +12,4 @@ const editedText = {
   },
 };
 
-export default editedText;
+export default prose;

package/src/helpers/{edited-text/edited-text.njk → prose/prose.njk}

@@ -1,5 +1,5 @@
 <h4>Lists:</h4>
-<div class="mds-edited-text">
+<div class="mds-prose">
   <ol>
     <li>
       one
@@ -28,8 +28,8 @@
   </ol>
 </div>
 
-<h4>Paragraph (combined with font-body-copy-bulk):</h4>
-<div class="mds-edited-text mds-font-s0--bulk">
+<h4>Paragraph:</h4>
+<div class="mds-prose">
   <h3>Paragraph 1</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacus mi, molestie vulputate dolor dictum, mollis tempor dolor. Proin ut interdum tortor, eu dictum massa. Quisque eu congue mi. Curabitur ac fermentum lorem. Ut quam sapien, mollis vel rhoncus et, mattis non sapien. Aenean nec lacinia felis. Aenean rhoncus lacinia pretium. Cras rutrum mollis orci, vitae ultrices nisi fermentum sit amet. Donec vehicula libero ac mollis ornare. Pellentesque eleifend libero urna, accumsan tincidunt lectus lobortis nec.</p>
   <h3>Paragraph 2</h3>
@@ -40,7 +40,7 @@
 
 <h4>Tables</h4>
 
-<div class="mds-edited-text">
+<div class="mds-prose">
 
   <table border="1" cellpadding="10" cellspacing="0">
     <tr>
@@ -59,7 +59,7 @@
 
 <article style="margin: 2rem 0;">
   <h4>Iframes and media objects</h4>
-  <div class="mds-edited-text">
+  <div class="mds-prose">
     <p>
       <iframe src="https://player.vimeo.com/video/76979871" title="Embedded Video: The New Vimeo Player (You Know, For Videos)" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
     </p>

package/src/js/index.js

@@ -16,7 +16,7 @@ import modals from '../components/modal/modal';
 import fileUpload from '../components/inputs/file-upload/file-upload';
 import characterCount from '../components/inputs/textarea/character-count';
 import button from '../components/button/button';
-import editedText from '../helpers/edited-text/edited-text';
+import prose from '../helpers/prose/prose';
 
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
@@ -26,5 +26,5 @@ document.addEventListener('DOMContentLoaded', () => {
   characterCount.init();
   popovers.init();
   button.init();
-  editedText.setFluidVideos();
+  prose.setFluidVideos();
 });

package/src/scss/constants/_sd-tokens.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 10 Jul 2024 10:09:43 GMT
+ * Generated on Mon, 22 Jul 2024 16:50:30 GMT
  */
 
 $constant-color-neutral-base: #707070;

package/src/scss/helpers/__index.scss

@@ -4,9 +4,9 @@
 @import 'text-align';
 @import 'display';
 @import 'borders';
-@import 'edited-text';
+@import 'prose';
 @import 'width-height';
 @import 'fluid-video';
 @import 'animation';
 @import 'vertical-align';
-@import 'text-formatting'
+@import 'text-formatting';

package/src/scss/helpers/_font-types.scss

@@ -1,4 +1,3 @@
-
 $font-type-scales: 's-2', 's-1', 's0', 's1', 's2', 's3', 's4', 's5', 's6', 's7', 's8', 's9';
 
 // loop will create all the classes for the font type scales in the tokens array
@@ -17,7 +16,3 @@ $font-type-scales: 's-2', 's-1', 's0', 's1', 's2', 's3', 's4', 's5', 's6', 's7',
     line-height: var(--mds-font-type-#{$scale}-line-height);
   }
 }
-
-.mds-font-s0--bulk {
-  line-height: 1.75;
-}

package/src/scss/helpers/{_edited-text.scss → _prose.scss}

@@ -1,4 +1,5 @@
-.mds-edited-text {
+.mds-prose {
+  line-height: 1.75;
   & ul,
   & ol {
     margin: 0 0 ($constant-size-baseline * 5) ($constant-size-baseline * 3);
@@ -19,10 +20,6 @@
     margin-bottom: $constant-size-baseline;
     margin-left: $constant-size-baseline * 4;
   }
-}
-.mds-edited-text.mds-font-s0--bulk,
-.mds-font-s0--bulk .mds-edited-text,
-.mds-edited-text .mds-font-s0--bulk {
   & p {
     margin-bottom: $constant-size-baseline * 4;
   }

package/src/scss/resets/__index.scss

@@ -44,13 +44,13 @@ form,
 label,
 legend,
 caption,
-table:not(.mds-edited-text table),
-tbody:not(.mds-edited-text tbody),
-tfoot:not(.mds-edited-text tfoot),
-thead:not(.mds-edited-text thead),
-tr:not(.mds-edited-text tr),
-th:not(.mds-edited-text th),
-td:not(.mds-edited-text td),
+table:not(.mds-prose table),
+tbody:not(.mds-prose tbody),
+tfoot:not(.mds-prose tfoot),
+thead:not(.mds-prose thead),
+tr:not(.mds-prose tr),
+th:not(.mds-prose th),
+td:not(.mds-prose td),
 article,
 aside,
 canvas,

package/src/helpers/edited-text/README.md

@@ -1,5 +0,0 @@
-## Helpers
-
-Use the class `mds-edited-text` to normalise the text coming from a WYSIWYG editor,
-ul, ol tags will have the style that has been removed in css-reset
-this should only be used when content from a WYSIWYG editor is displayed

package/src/typography/block-of-text.config.json

@@ -1,3 +0,0 @@
-{
-    "notes": "Use font `s0` font modifier, `mds-font-s0--bulk` for long text for better legibility as it has an increased line-height"
-  }

package/src/typography/block-of-text.njk

@@ -1,4 +0,0 @@
-<div class="mds-font-s0--bulk">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ante ante, volutpat non venenatis ut, blandit vel tellus. Suspendisse sagittis convallis tincidunt. Proin ut neque quis enim maximus congue. Integer ullamcorper a urna gravida efficitur. Aliquam elementum non sem eu mattis. Proin erat nulla, tincidunt quis volutpat vel, suscipit sit amet sapien. Integer auctor aliquet ligula, vel mollis lorem semper id.</p>
-    <p>Praesent pharetra, ligula sed laoreet scelerisque, libero elit commodo sem, et varius arcu risus non turpis. Nulla scelerisque urna non felis vulputate luctus. Nullam ut metus at elit consequat ultrices. Nulla bibendum feugiat nibh, ut pellentesque orci pellentesque et. Nunc sagittis lacus quis elementum ornare. Nulla non commodo diam. Proin est ante, vestibulum et nisi nec, viverra pretium magna. Suspendisse sit amet mauris velit. Fusce placerat, lectus ut facilisis mattis, neque sapien hendrerit ex, ut dapibus dui sapien id orci. Nulla accumsan lacus commodo, euismod eros ac, malesuada eros. Phasellus ultricies porta eros a dictum. Integer dapibus ultrices elit, ut lacinia diam volutpat ac. Curabitur eu sollicitudin lectus. Donec fringilla lacus turpis, eu posuere orci lobortis vel. Morbi non diam id sapien commodo interdum id viverra tortor. Suspendisse iaculis odio justo, at maximus tellus facilisis ut.</p>
-</div>