docs(example-image-no-border): added styles for example image (#1024)

* feat(example-image-no-border): added styles for an unpadded image without background or border

* docs(example image): added margin: 0 for single images with no border

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

---------

Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com>

docs/_plugins/shortcodes/example.cjs

@@ -63,7 +63,7 @@ module.exports = function(eleventyConfig) {
      * @param {string}    [options.style]           styles for the wrapper
      * @param {string}    [options.wrapperClass]    class names for container element
      * @param {string}    [options.headline]        Text to go in the heading
-     * @param {string}    [options.palette='light'] Palette to apply, e.g. lightest, light see components/_section.scss
+     * @param {string}    [options.palette='light'] Palette to apply, or none for an unpadded image without background or border, e.g. lightest, light see components/_section.scss
      * @param {2|3|4|5|6} [options.headingLevel=3]          The heading level
      * @this {EleventyContext}
      */

docs/scss/components/_example.scss

@@ -75,6 +75,20 @@ rh-alert + .example {
 //   margin-bottom: 0;
 // }
 
+.example--palette-none {
+  padding: 0;
+  border: none;
+  border-radius: none;
+
+  img:only-child {
+    margin: 0;
+  }
+
+  @include breakpoint(tango) {
+    padding: 0;
+  }
+}
+
 .example--palette-light {
   background: #ffffff;
   border: 1px solid #d2d2d2;

elements/rh-spinner/docs/20-guidelines.md

@@ -22,9 +22,10 @@ occupies, use a spinner size that matches.
 - If you use the small size with a text label, it can be used in very small containers like a card
 - If you use the small size without a text label, it should only be used in buttons or other containers of equal size
 
-![Spinner usage examples; from top to bottom, an app, a dialog, a card, and a 
-button showing spinners of various sizes with and without text labels]({{ 
-'../spinner-examples.png' | url }})
+{% example palette="none",
+          alt="Spinner usage examples; from top to bottom, an app, a dialog, a card, and a 
+button showing spinners of various sizes with and without text labels",
+          src="../spinner-examples.png" %}
 
 ## Orientation