docs: add <Callout> component

Author: mrholek

packages/docs/.vuepress/config.ts

@@ -69,6 +69,7 @@ export default defineUserConfig({
     tocPlugin({}),
     registerComponentsPlugin({
       components: {
+        Callout: path.resolve(__dirname, './theme-coreui/src/client/components/Callout.vue'),
         ScssDocs: path.resolve(__dirname, './theme-coreui/src/client/components/ScssDocs.vue'),
       },
     }),

packages/docs/.vuepress/theme-coreui/src/client/components/Callout.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :class="class">
+    <h5 v-if="title">{{ title }}</h5>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Callout',
+  props: {
+    color: String,
+    title: String,
+  },
+  setup(props) {
+    return {
+      class: [
+        'docs-callout',
+        {
+          [`docs-callout-${props.color}`]: props.color,
+        }
+      ],
+      color: props.color,
+      title: props.title,
+    }
+  },
+})
+</script>

packages/docs/.vuepress/theme-coreui/src/client/styles/_callouts.scss

@@ -0,0 +1,39 @@
+//
+// Callouts
+//
+
+.docs-callout {
+  --#{$prefix}link-color-rgb: var(--cd-callout-link);
+  --#{$prefix}code-color: var(--cd-callout-code-color);
+
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  background-color: var(--cd-callout-bg, var(--cui-gray-100));
+  border-left: .25rem solid var(--cd-callout-border, var(--cui-gray-300));
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .docs-callout {
+    margin-top: -.25rem;
+  }
+
+  .highlight {
+    background-color: rgba($black, .05);
+  }
+}
+
+// Variations
+@each $variant in $cd-callout-variants {
+  .docs-callout-#{$variant} {
+    --cd-callout-color: var(--cui-#{$variant}-text-emphasis);
+    --cd-callout-bg: rgba(var(--cui-#{$variant}-rgb), .1);
+    --cd-callout-border: var(--cui-#{$variant});
+  }
+}

packages/docs/.vuepress/theme-coreui/src/client/styles/index.scss

@@ -5,6 +5,7 @@
 
 @import "ads";
 @import "anchor";
+@import "callouts";
 @import "component-examples";
 @import "footer";
 @import "layout";

packages/docs/components/button.md

@@ -32,12 +32,9 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
 <CButton color="link">Link</CButton>
 ```
 
-<div class="callout callout-info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</div>
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ## Disable text wrapping
 
@@ -115,7 +112,7 @@ If you need a ghost variant of button, set `variant="ghost"` prop to remove all
 ```
 
 
-<CCallout color="info">Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</CCallout>
+<Callout color="info">Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.</Callout>
 
 ## Sizes
 

packages/docs/components/card.md

@@ -780,12 +780,9 @@ Use `color` property to change the appearance of a card.
 </template>
 ```
 
-<CCallout color="info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</CCallout>
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ### Border
 

packages/docs/components/dropdown.md

@@ -292,12 +292,9 @@ And putting it to use in a navbar:
 
 ## Directions
 
-<CCallout color="info">
-  <h4>RTL</h4>
-  <p>
-    Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
-  </p>
-</CCallout>
+<Callout color="info" title="RTL">
+  Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
+</Callout>
 
 ### Centered
 

packages/docs/components/list-group.md

@@ -194,12 +194,9 @@ Contextual classes also work with `<a>`s or `<button>`s. Note the addition of th
 </CListGroup>
 ```
 
-<CCallout color="info">
-  <h5>Conveying meaning to assistive technologies</h5>
-  <p>
-    Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
-  </p>
-</CCallout>
+<Callout color="info" title="Conveying meaning to assistive technologies">
+  Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.
+</Callout>
 
 ## With badges
 

packages/docs/components/placeholder.md

@@ -100,9 +100,9 @@ We apply additional styling to `CButton`s via `::before` to ensure the `height`
 <CButton v-c-placeholder="{xs: 4}" color="primary" aria-hidden="true" disabled href="#" tabindex="-1"></CButton>
 ```
 
-<CCallout class="mb-4" color="info">
+<Callout color="info">
   The use of <code>aria-hidden="true"</code> only indicates that the element should be hidden to screen readers. The <strong>loading</strong> behavior of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavaScript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
-</CCallout>
+</Callout>
 
 ### Width
 

packages/docs/layout/breakpoints.md

@@ -171,9 +171,9 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // No media query since the xxl breakpoint has no upper bound on its width
 ```
 
-<CCallout color="warning">
+<Callout color="warning">
   <strong>Why subtract .02px?</strong> Browsers don’t currently support <a href="https://www.w3.org/TR/mediaqueries-4/#range-context">range context queries</a>, so we work around the limitations of <a href="https://www.w3.org/TR/mediaqueries-4/#mq-min-max"><code>min-</code> and <code>max-</code> prefixes</a> and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
-</CCallout>
+</Callout>
 
 ### Single breakpoint