[Emotion] Converted EuiBeacon

src/components/beacon/__snapshots__/beacon.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiBeacon accepts size 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2"
+  class="euiBeacon testClass1 testClass2 css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
   data-test-subj="test subject string"
   style="height:14px;width:14px"
 />
@@ -12,7 +12,7 @@ exports[`EuiBeacon accepts size 1`] = `
 exports[`EuiBeacon is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2"
+  class="euiBeacon testClass1 testClass2 css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
   data-test-subj="test subject string"
   style="height:12px;width:12px"
 />

src/components/beacon/beacon.styles.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { keyframes, css } from '@emotion/react';
+import { euiPaletteColorBlind } from '../../services';
+import { euiCanAnimate } from '../../global_styling/variables/_animations';
+
+const visColors = euiPaletteColorBlind();
+
+const euiBeaconPulseLarge = keyframes`
+ 0% {
+    transform: scale(.1);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(3);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`;
+
+const euiBeaconPulseSmall = keyframes`
+   0% {
+    transform: scale(.1);
+    opacity: 1;
+  }
+
+  70% {
+    transform: scale(2);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`;
+
+export const euiBeaconStyles = () => ({
+  // Base
+  euiBeacon: css`
+    position: relative;
+    background-color: ${visColors[0]};
+    border-radius: 50%;
+
+    &:before,
+    &:after {
+      position: absolute;
+      content: '';
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: 0;
+      background-color: transparent;
+      border-radius: 50%;
+      box-shadow: 0 0 1px 1px ${visColors[0]};
+    }
+
+    &:before {
+      ${euiCanAnimate(
+        css`
+          animation: ${euiBeaconPulseLarge} 2.5s infinite ease-out;
+        `
+      )}
+    }
+
+    &:after {
+      ${euiCanAnimate(
+        css`
+          animation: ${euiBeaconPulseSmall} 2.5s infinite ease-out 0.25s;
+        `
+      )}
+    }
+  `,
+});

src/components/beacon/beacon.test.tsx

@@ -9,10 +9,13 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { renderWithStyles } from '../../test/internal';
 
 import { EuiBeacon } from './beacon';
 
 describe('EuiBeacon', () => {
+  renderWithStyles(<EuiBeacon />);
+
   test('is rendered', () => {
     const component = render(<EuiBeacon {...requiredProps} />);
 

src/components/beacon/beacon.tsx

@@ -10,6 +10,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
+import { euiBeaconStyles } from './beacon.styles';
+
 export type EuiBeaconProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
   CommonProps & {
     /**
@@ -25,12 +27,16 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiBeacon', className);
+  const styles = euiBeaconStyles();
+  const cssStyles = [styles.euiBeacon];
 
-  const styles = {
+  const beaconStyle = {
     ...style,
     height: size,
     width: size,
   };
 
-  return <div className={classes} style={styles} {...rest} />;
+  return (
+    <div className={classes} css={cssStyles} style={beaconStyle} {...rest} />
+  );
 };

src/components/index.scss

@@ -5,7 +5,6 @@
 @import 'aspect_ratio/index';
 @import 'badge/index';
 @import 'basic_table/index';
-@import 'beacon/index';
 @import 'bottom_bar/index';
 @import 'button/index';
 @import 'breadcrumbs/index';

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -56,7 +56,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -153,7 +153,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -255,7 +255,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -433,7 +433,7 @@ exports[`EuiTourStep is rendered 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon"
+          class="euiBeacon euiTour__beacon css-haebed-euiBeacon-euiCanAnimate-euiBeacon-euiCanAnimate-euiBeacon"
           style="height: 12px; width: 12px;"
         />
       </div>

src/global_styling/variables/_animations.ts

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+import { css } from '@emotion/react';
 import { CSSProperties } from 'react';
 
 /**
@@ -15,8 +15,8 @@ import { CSSProperties } from 'react';
  * @param content
  * @returns string
  */
-export const euiCanAnimate = (content: string) => `
-@media screen and (prefers-reduced-motion: no-preference) {
+export const euiCanAnimate = (content: any) => css`
+  @media screen and (prefers-reduced-motion: no-preference) {
     ${content}
   }
 `;
@@ -28,8 +28,8 @@ export const euiCanAnimate = (content: string) => `
  * @param content
  * @returns string
  */
-export const euiCantAnimate = (content: string) => `
-@media screen and (prefers-reduced-motion: reduce) {
+export const euiCantAnimate = (content: string) => css`
+  @media screen and (prefers-reduced-motion: reduce) {
     ${content}
   }
 `;

upcoming_changelogs/5814.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiBeacon` to Emotion