[OUI Docs] Updated the section Beacon (#367)

* Updated the section Beacon Signed-off-by: AbhishekReddy1127 <[email protected]> * Updated the page Signed-off-by: AbhishekReddy1127 <[email protected]> * Updated the page Signed-off-by: AbhishekReddy1127 <[email protected]> --------- Signed-off-by: AbhishekReddy1127 <[email protected]> Co-authored-by: Sean Neumann <[email protected]>
opensearch-project · Feb 28, 2023 · fb2a386 · fb2a386
1 parent 3f136e1
commit fb2a386
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
@@ -20,6 +20,8 @@ import { OuiBeacon, OuiText } from '../../../../src/components';
 import { beaconConfig } from './playground';
 
 import Beacon from './beacon';
+import { OuiCallOut } from '../../../../src/components/call_out';
+import { OuiSpacer } from '../../../../src/components/spacer';
 const beaconSource = require('!!raw-loader!./beacon');
 const beaconHtml = renderToHtml(Beacon);
 const beaconSnippet = '<OuiBeacon />';
@@ -40,6 +42,11 @@ export const BeaconExample = {
       ],
       text: (
         <OuiText>
+          <OuiCallOut
+            color="warning"
+            title="OuiBeacon should only be used in conjunction with OuiTour."
+          />
+          <OuiSpacer />
           <p>
             Use the <strong>OuiBeacon</strong> component to draw visual
             attention to a specific location or element.