Indicator: new component

docs/docs-components/siteIndex.ts

@@ -150,6 +150,7 @@ const siteIndex: readonly [siteIndexType, ...siteIndexType[]] = [
       'IconButtonLink',
       'IconButtonFloating',
       'Image',
+      'Indicator',
       'Label',
       'Layer',
       'Letterbox',

docs/examples/indicator/counter.tsx

@@ -0,0 +1,11 @@
+import { Flex, Indicator } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex alignItems="center" gap={6} height="100%" justifyContent="center" width="100%">
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={3} />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={16} />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={100} />
+    </Flex>
+  );
+}

docs/examples/indicator/main.tsx

@@ -0,0 +1,13 @@
+import { Flex, Indicator } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex alignItems="center" gap={6} height="100%" justifyContent="center" width="100%">
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={3} />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={11} />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={86} />
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" count={100} />
+    </Flex>
+  );
+}

docs/examples/indicator/notification.tsx

@@ -0,0 +1,9 @@
+import { Flex, Indicator } from 'gestalt';
+
+export default function Example() {
+  return (
+    <Flex alignItems="center" gap={6} height="100%" justifyContent="center" width="100%">
+      <Indicator accessibilityLabel="Visit the Gestalt documentation" />
+    </Flex>
+  );
+}

docs/pages/visual-test/Indicator-dark.tsx

@@ -0,0 +1,17 @@
+import { Box, ColorSchemeProvider, Flex, Indicator } from 'gestalt';
+
+export default function Snapshot() {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="default" display="inlineBlock" padding={1}>
+        <Flex alignItems="center" gap={6} height="100%" justifyContent="center" width="100%">
+          <Indicator accessibilityLabel="Visit the Gestalt documentation" />
+          <Indicator accessibilityLabel="Visit the Gestalt documentation" count={3} />
+          <Indicator accessibilityLabel="Visit the Gestalt documentation" count={11} />
+          <Indicator accessibilityLabel="Visit the Gestalt documentation" count={86} />
+          <Indicator accessibilityLabel="Visit the Gestalt documentation" count={100} />
+        </Flex>
+      </Box>
+    </ColorSchemeProvider>
+  );
+}

docs/pages/visual-test/Indicator.tsx

@@ -0,0 +1,15 @@
+import { Box, Flex, Indicator } from 'gestalt';
+
+export default function Snapshot() {
+  return (
+    <Box padding={1}>
+      <Flex alignItems="center" gap={6} height="100%" justifyContent="center" width="100%">
+        <Indicator accessibilityLabel="Visit the Gestalt documentation" />
+        <Indicator accessibilityLabel="Visit the Gestalt documentation" count={3} />
+        <Indicator accessibilityLabel="Visit the Gestalt documentation" count={11} />
+        <Indicator accessibilityLabel="Visit the Gestalt documentation" count={86} />
+        <Indicator accessibilityLabel="Visit the Gestalt documentation" count={100} />
+      </Flex>
+    </Box>
+  );
+}

docs/pages/web/indicator.tsx

@@ -0,0 +1,53 @@
+import docGen, { DocGen } from '../../docs-components/docgen';
+import GeneratedPropTable from '../../docs-components/GeneratedPropTable';
+import LocalizationSection from '../../docs-components/LocalizationSection';
+import MainSection from '../../docs-components/MainSection';
+import Page from '../../docs-components/Page';
+import PageHeader from '../../docs-components/PageHeader';
+import SandpackExample from '../../docs-components/SandpackExample';
+import counter from '../../examples/indicator/counter';
+import main from '../../examples/indicator/main';
+import notification from '../../examples/indicator/notification';
+
+export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
+  return (
+    <Page title={generatedDocGen?.displayName}>
+      <PageHeader description={generatedDocGen?.description} name={generatedDocGen?.displayName}>
+        <SandpackExample
+          code={main}
+          hideEditor
+          name={`Main ${generatedDocGen?.displayName} example`}
+        />
+      </PageHeader>
+
+      <GeneratedPropTable generatedDocGen={generatedDocGen} />
+
+      <LocalizationSection name={generatedDocGen?.displayName} noDefaultLabelProvider />
+
+      <MainSection name="Variants">
+        <MainSection.Subsection description="Notification" title="Notification">
+          <MainSection.Card
+            cardSize="lg"
+            sandpackExample={<SandpackExample code={notification} name="Notification example" />}
+          />
+        </MainSection.Subsection>
+        <MainSection.Subsection description="Counter" title="Counter">
+          <MainSection.Card
+            cardSize="lg"
+            sandpackExample={<SandpackExample code={counter} name="Counter example" />}
+          />
+        </MainSection.Subsection>
+      </MainSection>
+    </Page>
+  );
+}
+
+export async function getServerSideProps(): Promise<{
+  props: {
+    generatedDocGen: DocGen;
+  };
+}> {
+  return {
+    props: { generatedDocGen: await docGen('Indicator') },
+  };
+}

packages/gestalt-design-tokens/tokens/classic/comp-web-color-dark.json

@@ -390,6 +390,9 @@
           }
         }
       },
+      "indicator": {
+        "value": "{color.background.primary.base.value}"
+      },
       "mask": {
         "wash": {
           "value": "rgba(0, 0, 0, 0.04)",
@@ -742,6 +745,9 @@
           "value": "#404040"
         }
       },
+      "indicator": {
+        "value": "#000000"
+      },
       "popover": {
         "primary": {
           "value": "#212121"

packages/gestalt-design-tokens/tokens/classic/comp-web-color-light.json

@@ -439,6 +439,9 @@
           }
         }
       },
+      "indicator": {
+        "value": "{color.background.primary.base.value}"
+      },
       "mask": {
         "wash": {
           "value": "rgba(0, 0, 0, 0.04)"
@@ -820,6 +823,9 @@
           "value": "#efefef"
         }
       },
+      "indicator": {
+        "value": "{color.white.mochimalist.0.value}"
+      },
       "popover": {
         "primary": {
           "value": "#fff"

packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-dark.json

@@ -535,6 +535,9 @@
           }
         }
       },
+      "indicator": {
+        "value": "{sema.color.border.inverse.value}"
+      },
       "switch": {
         "focus": {
           "inner": {

packages/gestalt-design-tokens/tokens/vr-theme-web-mapping/comp-web-color-light.json

@@ -318,6 +318,9 @@
           }
         }
       },
+      "indicator": {
+        "value": "{sema.color.background.primary.value}"
+      },
       "switch": {
         "default": {
           "unselected": {
@@ -517,6 +520,9 @@
           }
         }
       },
+      "indicator": {
+        "value": "{sema.color.border.inverse.value}"
+      },
       "switch": {
         "default": {
           "unselected": {

packages/gestalt/src/Indicator.css

@@ -0,0 +1,23 @@
+.notification {
+  composes: borderBox from "./Layout.css";
+  background-color: var(--color-background-box-primary);
+  border-radius: var(--rounding-circle);
+  height: 6px;
+  width: 6px;
+}
+
+.counter {
+  composes: borderBox from "./Layout.css";
+  background-color: var(--color-background-box-primary);
+  border-radius: var(--rounding-pill);
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  min-width: 16px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.marginTop {
+  padding-top: 1px;
+}

packages/gestalt/src/Indicator.jsdom.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import Indicator from './Indicator';
+
+describe('Indicator', () => {
+  it('as notification', () => {
+    const { baseElement } = render(<Indicator accessibilityLabel="Notification" />);
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('as counter with 1 digit', () => {
+    const { baseElement } = render(<Indicator accessibilityLabel="Counter" count={3} />);
+    expect(baseElement).toMatchSnapshot();
+    expect(screen.getByText('3')).toBeVisible();
+  });
+
+  it('as counter with 3 digits', () => {
+    const { baseElement } = render(<Indicator accessibilityLabel="Counter" count={100} />);
+    expect(baseElement).toMatchSnapshot();
+    expect(screen.getByText('99+')).toBeVisible();
+  });
+});

packages/gestalt/src/Indicator.tsx

@@ -0,0 +1,59 @@
+import classnames from 'classnames';
+import styles from './Indicator.css';
+import TextUI from './TextUI';
+import useInExperiment from './useInExperiment';
+
+type Props = {
+  /**
+   * Label for screen readers to announce Button. See the [Accessibility guidelines](https://gestalt.pinterest.systems/web/button#ARIA-attributes) for details on proper usage.
+   */
+  accessibilityLabel: string;
+  /**
+   * When supplied, will display a numeric counter. See the [Counter](https://gestalt.pinterest.systems/web/sidenavigation#Counter) variant to learn more. Above three digits, the only option to display is "99+".
+   */
+  count?: number;
+  /**
+   * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
+   */
+  dataTestId?: string;
+};
+
+/**
+ * [Indicator](https://gestalt.pinterest.systems/web/indicator) displays a visual affordance that something has been updated (either with a quantitative number or not)
+ *
+ * ![Indicator light mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Indicator.spec.ts-snapshots/Indicator-chromium-darwin.png)
+ * ![Indicator dark mode](https://raw.githubusercontent.com/pinterest/gestalt/master/playwright/visual-test/Indicator-dark.spec.ts-snapshots/Indicator-dark-chromium-darwin.png)
+ *
+ */
+export default function Indicator({ accessibilityLabel, count, dataTestId }: Props) {
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
+  if (count === undefined) {
+    return (
+      <div
+        aria-label={accessibilityLabel}
+        className={classnames(styles.notification)}
+        data-test-id={dataTestId}
+        role="status"
+      />
+    );
+  }
+
+  const displayCount = count < 100 ? `${count}` : '99+';
+
+  return (
+    <div
+      aria-label={accessibilityLabel}
+      className={classnames(styles.counter, { [styles.marginTop]: !isInVRExperiment })}
+      data-test-id={dataTestId}
+      role="status"
+    >
+      <TextUI align="center" color="light" size="xs">
+        {displayCount}
+      </TextUI>
+    </div>
+  );
+}

packages/gestalt/src/__snapshots__/Indicator.jsdom.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Indicator as counter with 1 digit 1`] = `
+<body>
+  <div>
+    <div
+      aria-label="Counter"
+      class="counter marginTop"
+      role="status"
+    >
+      <div
+        class="light alignCenter breakWord Text fontWeightSemiBold fontSize100"
+      >
+        3
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Indicator as counter with 3 digits 1`] = `
+<body>
+  <div>
+    <div
+      aria-label="Counter"
+      class="counter marginTop"
+      role="status"
+    >
+      <div
+        class="light alignCenter breakWord Text fontWeightSemiBold fontSize100"
+      >
+        99+
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Indicator as notification 1`] = `
+<body>
+  <div>
+    <div
+      aria-label="Notification"
+      class="notification"
+      role="status"
+    />
+  </div>
+</body>
+`;