How to use @elastic/eui - 10 common examples

it(`on ENTER keyup`, () => {
      const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
      e.keyCode = keyCodes.ENTER;
      element.trigger(e);
      sinon.assert.calledOnce(scope.handleClick);
    });

it(`on ENTER keyup`, () => {
      const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
      e.keyCode = keyCodes.ENTER;
      element.trigger(e);
      sinon.assert.calledOnce(scope.handleClick);
    });

it('should be shown again, when pressing Escape in ace editor', () => {
      const textarea = element.find('textarea');
      const hint = element.find('.kbnUiAceKeyboardHint');
      sinon.spy(hint[0], 'focus');
      const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
      ev.keyCode = keyCodes.ESCAPE;
      textarea.trigger(ev);
      expect(hint[0].focus.called).to.be(true);
      expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);
    });
  });

it('should be shown again, when pressing Escape in ace editor', () => {
      const textarea = element.find('textarea');
      const hint = element.find('.kbnUiAceKeyboardHint');
      sinon.spy(hint[0], 'focus');
      const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
      ev.keyCode = keyCodes.ESCAPE;
      textarea.trigger(ev);
      expect(hint[0].focus.called).to.be(true);
      expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);
    });
  });

const CommitId = styled.span`
  display: inline-block;
  padding: 0 ${theme.paddingSizes.xs};
  border: ${theme.euiBorderThin};
`;

const Addition = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.s};
  border-radius: ${theme.euiSizeXS};
  color: white;
  margin-right: ${theme.euiSizeS};
  background-color: ${theme.euiColorDanger};
`;

const Deletion = styled(Addition)`
  background-color: ${theme.euiColorVis0};
`;

const Container = styled.div`
  padding: ${theme.paddingSizes.xs} ${theme.paddingSizes.m};
`;

const TopBarContainer = styled.div`
  height: calc(48rem / 14);
  border-bottom: ${theme.euiBorderThin};
  padding: 0 ${theme.paddingSizes.m};
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

// @types/styled-components@3.0.1 does not yet support `defaultProps`, which EuiAccordion uses

titleShort: '95th',
      data: p95,
      type: 'linemark',
      color: theme.euiColorVis5
    },
    {
      title: i18n.translate(
        'xpack.apm.transactions.chart.99thPercentileLabel',
        {
          defaultMessage: '99th percentile'
        }
      ),
      titleShort: '99th',
      data: p99,
      type: 'linemark',
      color: theme.euiColorVis7
    }
  ];

  if (anomalyTimeseries) {
    // insert after Avg. series
    series.splice(
      1,
      0,
      getAnomalyBoundariesSeries(anomalyTimeseries.anomalyBoundaries),
      getAnomalyScoreSeries(anomalyTimeseries.anomalyScore)
    );
  }

  return series;
}

titleShort: '95th',
      data: p95,
      type: 'linemark',
      color: theme.euiColorVis5
    },
    {
      title: i18n.translate(
        'xpack.apm.transactions.chart.99thPercentileLabel',
        {
          defaultMessage: '99th percentile'
        }
      ),
      titleShort: '99th',
      data: p99,
      type: 'linemark',
      color: theme.euiColorVis7
    }
  ];

  if (anomalyTimeseries) {
    // insert after Avg. series
    series.splice(
      1,
      0,
      getAnomalyBoundariesSeries(anomalyTimeseries.anomalyBoundaries),
      getAnomalyScoreSeries(anomalyTimeseries.anomalyScore)
    );
  }

  return series;
}

titleShort: '95th',
      data: p95,
      type: 'linemark',
      color: theme.euiColorVis5
    },
    {
      title: i18n.translate(
        'xpack.apm.transactions.chart.99thPercentileLabel',
        {
          defaultMessage: '99th percentile'
        }
      ),
      titleShort: '99th',
      data: p99,
      type: 'linemark',
      color: theme.euiColorVis7
    }
  ];

  if (anomalyTimeseries) {
    // insert after Avg. series
    series.splice(
      1,
      0,
      getAnomalyBoundariesSeries(anomalyTimeseries.anomalyBoundaries),
      getAnomalyScoreSeries(anomalyTimeseries.anomalyScore)
    );
  }

  return series;
}

uiAceTextbox.keydown(ev => {
        if (ev.keyCode === keyCodes.ESCAPE) {
          // If the autocompletion context menu is open then we want to let ESC close it but
          // **not** exit out of editing mode.
          if (!isAutoCompleterOpen) {
            ev.preventDefault();
            ev.stopPropagation();
            enableOverlay();
            hint.focus();
          }
        }
      });

}, () => {
        // trigger onChange with query for job id to trigger table filter
        const query = EuiSearchBar.Query.parse(selectedId);
        this.onChange({ query });
      });
    }