From c7c9763246d831735ee768e62e527f1280a2f312 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Kauffman <5090492+nikkimk@users.noreply.github.com> Date: Fri, 2 Jun 2023 13:52:42 -0400 Subject: [PATCH] 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 --------- Co-authored-by: Steven Spriggs --- docs/_plugins/shortcodes/example.cjs | 2 +- docs/scss/components/_example.scss | 14 ++++++++++++++ elements/rh-spinner/docs/20-guidelines.md | 7 ++++--- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/docs/_plugins/shortcodes/example.cjs b/docs/_plugins/shortcodes/example.cjs index 4e61d5007b..fbdc71a711 100644 --- a/docs/_plugins/shortcodes/example.cjs +++ b/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} */ diff --git a/docs/scss/components/_example.scss b/docs/scss/components/_example.scss index c0fd03c249..aca529917a 100644 --- a/docs/scss/components/_example.scss +++ b/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; diff --git a/elements/rh-spinner/docs/20-guidelines.md b/elements/rh-spinner/docs/20-guidelines.md index 8e70f54cfa..953a2d06af 100644 --- a/elements/rh-spinner/docs/20-guidelines.md +++ b/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