Grafana-UI: Add story/docs for Counter (#30253)

* Grafana-UI: Add story/docs for Counter

* Grafana-UI: Fix naming

packages/grafana-ui/src/components/Tabs/Counter.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useContext } from 'react';
+import React, { FC } from 'react';
 import { css } from 'emotion';
-import { stylesFactory, ThemeContext } from '../../themes';
+import { stylesFactory, useStyles } from '../../themes';
 import { GrafanaTheme, locale } from '@grafana/data';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
@@ -23,8 +23,7 @@ export interface CounterProps {
 }
 
 export const Counter: FC<CounterProps> = ({ value }) => {
-  const theme = useContext(ThemeContext);
+  const styles = useStyles(getStyles);
-  const styles = getStyles(theme);
 
   return <span className={styles.counter}>{locale(value, 0).text}</span>;
 };

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { TabsBar, Tab, TabContent } from '@grafana/ui';
+import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
+import mdx from './TabsBar.mdx';
+import { CounterProps } from './Counter';
 
 export default {
   title: 'Layout/Tabs',
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 const tabs = [
@@ -44,3 +52,11 @@ export const Simple = () => {
     </UseState>
   );
 };
+
+export const Counter: Story<CounterProps> = args => {
+  return <TabCounter {...args} />;
+};
+
+Counter.args = {
+  value: 10,
+};

packages/grafana-ui/src/components/Tabs/TabsBar.mdx

@@ -1,7 +1,8 @@
-import { Props } from '@storybook/addon-docs/blocks';
+import { ArgsTable } from '@storybook/addon-docs/blocks';
-import { TabsBar } from './TabsBar';
+import { Counter } from "./Counter";
+import { Tab } from './Tab'
 
-# TabBar
+# TabsBar
 
 A composition component for rendering a TabBar with Tabs for navigation.
 
@@ -9,4 +10,12 @@ It has two modes - navigation and onClick. Navigation renders it as a simple `<a
 
 **Warning!** Using `href` and `onChangeTab` at the same time may have unintended consequences.
 
-<Props of={TabsBar} />
+# Tab
+
+<ArgsTable of={Tab}/>
+
+# Counter
+
+A count indicator displayed alongside tabs and showing numeric values.
+
+<ArgsTable of={Counter} />