From af1ad5f3a9fe95d90b2d5310548e766846de998e Mon Sep 17 00:00:00 2001
From: AbhishekReddy1127 <nallamsa@amazon.com>
Date: Tue, 21 Feb 2023 17:51:02 +0000
Subject: [PATCH 1/3] Updated the section Beacon

Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com>
---
 src-docs/src/views/beacon/beacon_example.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index 1c36eaad31..319f859047 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -20,6 +20,7 @@ import { OuiBeacon, OuiText } from '../../../../src/components';
 import { beaconConfig } from './playground';
 
 import Beacon from './beacon';
+import { OuiCallOut } from '../../../../src/components/call_out';
 const beaconSource = require('!!raw-loader!./beacon');
 const beaconHtml = renderToHtml(Beacon);
 const beaconSnippet = '<OuiBeacon />';
@@ -40,6 +41,10 @@ export const BeaconExample = {
       ],
       text: (
         <OuiText>
+          <OuiCallOut
+            color="warning"
+            title="OuiBeacon should only be used in conjunction with OuiTour."
+          />
           <p>
             Use the <strong>OuiBeacon</strong> component to draw visual
             attention to a specific location or element.

From f766d19e5ab0e7926bc3929f014b320630414aeb Mon Sep 17 00:00:00 2001
From: AbhishekReddy1127 <nallamsa@amazon.com>
Date: Mon, 27 Feb 2023 04:05:49 +0000
Subject: [PATCH 2/3] Updated the page

Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com>
---
 src-docs/src/views/beacon/beacon_example.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index 319f859047..b700f477d6 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -21,6 +21,7 @@ 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 />';
@@ -45,6 +46,7 @@ export const BeaconExample = {
             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.

From 7418bce00aa9a0a335e0d40c8681edcda8a29808 Mon Sep 17 00:00:00 2001
From: AbhishekReddy1127 <nallamsa@amazon.com>
Date: Mon, 27 Feb 2023 04:06:36 +0000
Subject: [PATCH 3/3] Updated the page

Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com>
---
 src-docs/src/views/beacon/beacon_example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index b700f477d6..ac1a3be726 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -46,7 +46,7 @@ export const BeaconExample = {
             color="warning"
             title="OuiBeacon should only be used in conjunction with OuiTour."
           />
-          <OuiSpacer/>
+          <OuiSpacer />
           <p>
             Use the <strong>OuiBeacon</strong> component to draw visual
             attention to a specific location or element.