feat: Counter (#123)

* feat: Counter

* reduce size, change global styles

src/counter/Counter.tsx

@@ -0,0 +1,38 @@
+import React, { PropsWithChildren } from 'react';
+import { css } from '@emotion/react';
+import theme from '../theme';
+
+type CounterProps = PropsWithChildren<{
+  /**
+   * The color of the counter
+   * @default 'default'
+   **/
+  variant?: 'default' | 'danger';
+}>;
+
+const counterCSS = css`
+  display: inline-block;
+  padding: 0 var(--ac-global-dimension-static-size-65);
+  border-radius: calc(
+    (
+      ${theme.typography.sizes.small.lineHeight}px + 2 *
+        var(--ac-global-dimension-static-size-25) / 2
+    )
+  );
+  background-color: var(--ac-global-background-color-light);
+  font-size: ${theme.typography.sizes.small.fontSize}px;
+  line-height: ${theme.typography.sizes.small.lineHeight}px;
+  color: var(--ac-global-text-color-900);
+  &[data-variant='danger'] {
+    background-color: var(--ac-global-background-color-danger);
+  }
+`;
+
+export function Counter(props: CounterProps) {
+  const { children, variant = 'default' } = props;
+  return (
+    <span css={counterCSS} data-variant={variant} className="ac-counter">
+      {children}
+    </span>
+  );
+}

src/counter/index.tsx

@@ -0,0 +1 @@
+export * from "./Counter";

src/index.tsx

@@ -30,6 +30,7 @@ export * from './progress';
 export * from './switch';
 export * from './empty';
 export * from './contextualhelp';
+export * from './counter';
 export { theme, designationColors } from './theme';
 // export interface Props extends HTMLAttributes<HTMLDivElement> {
 //   /** custom content, defaults to 'the snozzberries taste like snozzberries' */

src/provider/GlobalStyles.tsx

@@ -72,8 +72,13 @@ export const globalCSS = css`
     --ac-global-color-gray-200: #585d64;
     --ac-global-color-gray-100: #666b71;
 
+    --ac-global-color-danger: #f85149;
+
+    --ac-global-text-color-900: rgba(255, 255, 255, 0.9);
+
     --ac-global-background-color-light: var(--ac-global-color-gray-500);
     --ac-global-background-color-dark: var(--ac-global-color-gray-900);
+    --ac-global-background-color-danger: var(--ac-global-color-danger);
 
     --ac-global-border-color-light: var(--ac-global-color-gray-100);
     --ac-global-border-color-dark: var(--ac-global-color-gray-400);

src/tabs/Tabs.tsx

@@ -44,6 +44,10 @@ const tabListCSS = css`
     transition: 0.3s;
     font-weight: bold;
     border-color: var(--tab-border-color);
+
+    display: flex;
+    align-items: center;
+    gap: var(--ac-global-dimension-static-size-65);
   }
 
   &[data-orientation='horizontal'] {
@@ -139,6 +143,7 @@ export function Tabs({
               >
                 {tab.name}
               </Text>
+              {tab?.extra}
             </button>
           );
         })}
@@ -165,6 +170,7 @@ type TabPaneChildFC = (props: TabPaneChildFCProps) => ReactNode;
 interface TabPaneProps
   extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'children'> {
   name: string;
+  extra?: ReactNode;
   children: ReactNode | TabPaneChildFC;
   className?: string;
   /**

stories/Accordion.stories.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Accordion, AccordionProps, AccordionItem, Card } from '../src';
+import {
+  Accordion,
+  AccordionProps,
+  AccordionItem,
+  Card,
+  Provider,
+} from '../src';
 import { withDesign } from 'storybook-addon-designs';
 import InfoTip from './components/InfoTip';
 
@@ -32,29 +38,31 @@ const AccordionContents = () => (
 export default meta;
 
 const Template: Story<AccordionProps> = args => (
-  <Card
-    title="Model Health"
-    subTitle={'An overview of the the health of your model'}
-    bodyStyle={{ padding: 0, overflow: 'hidden' }}
-    style={{ width: 700 }}
-    collapsible
-  >
-    <Accordion {...args}>
-      <AccordionItem
-        title="2 Predictions"
-        titleExtra={<InfoTip>Description of predictions</InfoTip>}
-        id="predictions"
-      >
-        <AccordionContents />
-      </AccordionItem>
-      <AccordionItem title="100 Features" id="features">
-        <AccordionContents />
-      </AccordionItem>
-      <AccordionItem title="10 Actuals" id="actuals">
-        <AccordionContents />
-      </AccordionItem>
-    </Accordion>
-  </Card>
+  <Provider>
+    <Card
+      title="Model Health"
+      subTitle={'An overview of the the health of your model'}
+      bodyStyle={{ padding: 0, overflow: 'hidden' }}
+      style={{ width: 700 }}
+      collapsible
+    >
+      <Accordion {...args}>
+        <AccordionItem
+          title="2 Predictions"
+          titleExtra={<InfoTip>Description of predictions</InfoTip>}
+          id="predictions"
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem title="100 Features" id="features">
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem title="10 Actuals" id="actuals">
+          <AccordionContents />
+        </AccordionItem>
+      </Accordion>
+    </Card>
+  </Provider>
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

stories/Counter.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { Meta, Story } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { LabelGroup, Label, LabelProps } from '../src/label';
+import { Counter, Provider } from '../src';
+
+const meta: Meta = {
+  title: 'Counter',
+  component: Counter,
+  decorators: [withDesign],
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+        default: 'Label',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+/**
+ * A gallery of all the variants
+ */
+export const Gallery = () => (
+  <Provider>
+    <div
+      css={css`
+        display: flex;
+        gap: 4px;
+      `}
+    >
+      <Counter>12</Counter>
+      <Counter variant="danger">12</Counter>
+    </div>
+  </Provider>
+);
+
+const Template: Story<LabelProps> = args => <Label {...args}>Label Text</Label>;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});

stories/Tabs.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, Story } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
 import { Tabs, TabsProps } from '../src/tabs/Tabs';
 import { Heading } from '../src/content';
+import { Counter, Provider } from '../src';
 
 const { TabPane } = Tabs;
 
@@ -75,6 +76,30 @@ export const LazyLoading: Story<TabsProps> = args => (
   </div>
 );
 
+export const WithExtra: Story<TabsProps> = args => (
+  <Provider>
+    <div style={{ width: 500 }} css={tabContentCSS}>
+      <Tabs {...args}>
+        <TabPane name="Tab 1" extra={<Counter>12</Counter>}>
+          {({ isSelected }) => (
+            <LazyLoadingTabContents isSelected={isSelected} />
+          )}
+        </TabPane>
+        <TabPane name="Tab 2" extra={<Counter variant="danger">23</Counter>}>
+          {({ isSelected }) => (
+            <LazyLoadingTabContents isSelected={isSelected} />
+          )}
+        </TabPane>
+        <TabPane name="Tab 2" extra={<Counter>2</Counter>}>
+          {({ isSelected }) => (
+            <LazyLoadingTabContents isSelected={isSelected} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  </Provider>
+);
+
 export const Gallery: Story<TabsProps> = args => (
   <div style={{ width: 500 }}>
     <section>