Adds OrderedList and ListItem components to Typography package (#2589)

* adds orderedlist and list item to typography package

* move directory

* removes duplicative content

* potential typo

* cleans up ts errors

* with changeset

* tests will pass now

* fix font color

* one more dep

* PR feedback

* PR feedback

* rename component

* with docs

* update readme

* more PR feedback

* Fix story file

* pr feedback

* rm dupe test

* oosp

* rm one final line

.changeset/neat-lizards-applaud.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/ordered-list': major
+---
+
+Releases OrderedList and OrderedListItem components

packages/ordered-list/README.md

@@ -0,0 +1,56 @@
+# Ordered List
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/ordered-list.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/ordered-list/live-example/)
+
+## Installation
+
+### Yarn
+
+```shell
+yarn add @leafygreen-ui/ordered-list
+```
+
+### NPM
+
+```shell
+npm install @leafygreen-ui/ordered-list
+```
+
+## Example
+
+```js
+<OrderedList>
+  <OrderedListItem
+    title="Title"
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
+  />
+  <OrderedListItem
+    title="Title"
+    description={
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna. <Link>Learn more.</Link>
+      </>
+    }
+  />
+  <OrderedListItem
+    title="Title"
+    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
+  />
+</OrderedList>
+```
+
+# OrderedList
+
+| Prop       | Type      | Description                                      | Default |
+| ---------- | --------- | ------------------------------------------------ | ------- |
+| `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` |
+
+# OrderedListItem
+
+| Prop        | Type              | Description                                                         | Default |
+| ----------- | ----------------- | ------------------------------------------------------------------- | ------- |
+| title       | `React.ReactNode` | The title of the list item.                                         |         |
+| description | `React.ReactNode` | The description of the list item. This will render below the title. |         |

packages/ordered-list/package.json

@@ -0,0 +1,39 @@
+
+{
+  "name": "@leafygreen-ui/ordered-list",
+  "version": "0.1.0",
+  "description": "LeafyGreen UI Kit Ordered List",
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "lg build-package",
+    "tsc": "lg build-ts",
+    "docs": "lg build-tsdoc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/descendants": "^1.0.1",
+    "@leafygreen-ui/emotion": "^4.0.7",
+    "@leafygreen-ui/lib": "^12.0.0",
+    "@leafygreen-ui/tokens": "^2.11.0",
+    "@leafygreen-ui/typography": "^19.3.0"
+  },
+  "peerDependencies": {
+    "@leafygreen-ui/leafygreen-provider": "^3.1.12"
+  },
+  "devDependencies": {
+    "@lg-tools/storybook-utils": "^0.1.1"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/ordered-list",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}

packages/ordered-list/src/OrderedList.stories.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { Link } from '@leafygreen-ui/typography';
+
+import { OrderedListProps } from '../OrderedList.types';
+
+import { OrderedList, OrderedListItem } from '.';
+
+const meta: StoryMetaType<typeof OrderedList> = {
+  title: 'Components/OrderedList',
+  component: OrderedList,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  args: {
+    children: (
+      <>
+        {' '}
+        <OrderedListItem
+          title="Title"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
+        />
+        <OrderedListItem
+          title="Title"
+          description={
+            <>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna.{' '}
+              <Link>Learn more.</Link>
+            </>
+          }
+        />
+        <OrderedListItem
+          title="Title"
+          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
+        />
+      </>
+    ),
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const LiveExample = (args: OrderedListProps) => {
+  return <OrderedList {...args}></OrderedList>;
+};
+LiveExample.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
+
+export const Generated = () => <></>;

packages/ordered-list/src/OrderedList/OrderedList.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { OrderedListItem } from '../OrderedListItem';
+
+import { OrderedList } from './OrderedList';
+
+const renderOL = () => {
+  return render(
+    <OrderedList>
+      <OrderedListItem title="Title" description="Description" />
+      <OrderedListItem title="Title" description="Description" />
+      <OrderedListItem title="Title" description="Description" />
+    </OrderedList>,
+  );
+};
+
+describe('packages/typography/ordered-list', () => {
+  describe('OrderedList', () => {
+    test('renders an ordered list', () => {
+      renderOL();
+
+      const ol = screen.getByRole('list');
+      expect(ol).toBeInTheDocument();
+    });
+
+    test('renders list items', () => {
+      renderOL();
+
+      const items = screen.getAllByRole('listitem');
+      expect(items).toHaveLength(3);
+    });
+
+    test('renders list items with titles', () => {
+      renderOL();
+
+      const titles = screen.getAllByText('Title');
+      expect(titles).toHaveLength(3);
+    });
+
+    test('renders list items with descriptions', () => {
+      renderOL();
+
+      const descriptions = screen.getAllByText('Description');
+      expect(descriptions).toHaveLength(3);
+    });
+
+    test('renders list items with step numbers in order', () => {
+      renderOL();
+
+      const steps = screen.getAllByRole('listitem');
+      steps.forEach((step, index) => {
+        expect(step).toHaveTextContent(`${index + 1}`);
+      });
+    });
+  });
+});

packages/ordered-list/src/OrderedList/OrderedList.styles.ts

@@ -0,0 +1,11 @@
+import { css } from '@leafygreen-ui/emotion';
+import { spacing } from '@leafygreen-ui/tokens';
+
+export const baseStyles = css`
+  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing[400]}px;
+  padding: 0;
+  margin: 0;
+`;

packages/ordered-list/src/OrderedList/OrderedList.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import propTypes from 'prop-types';
+
+import {
+  DescendantsProvider,
+  useInitDescendants,
+} from '@leafygreen-ui/descendants';
+import { cx } from '@leafygreen-ui/emotion';
+import LeafyGreenProvider, {
+  useDarkMode,
+} from '@leafygreen-ui/leafygreen-provider';
+
+import { OrderedListContext } from '../OrderedListContext';
+
+import { baseStyles } from './OrderedList.styles';
+import { OrderedListProps } from './OrderedList.types';
+
+const OrderedList = React.forwardRef(
+  (
+    { children, className, darkMode: darkModeProp, ...rest }: OrderedListProps,
+    ref: React.ForwardedRef<HTMLOListElement>,
+  ) => {
+    const { descendants, dispatch } =
+      useInitDescendants<HTMLLIElement>(OrderedListContext);
+
+    const { darkMode } = useDarkMode(darkModeProp);
+
+    return (
+      <LeafyGreenProvider darkMode={darkMode}>
+        <DescendantsProvider
+          context={OrderedListContext}
+          descendants={descendants}
+          dispatch={dispatch}
+        >
+          <ol {...rest} ref={ref} className={cx(baseStyles, className)}>
+            {children}
+          </ol>
+        </DescendantsProvider>
+      </LeafyGreenProvider>
+    );
+  },
+);
+
+OrderedList.displayName = 'OrderedList';
+
+OrderedList.propTypes = {
+  darkMode: propTypes.bool,
+};
+
+export { OrderedList };

packages/ordered-list/src/OrderedList/OrderedList.types.ts

@@ -0,0 +1,3 @@
+import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
+
+export type OrderedListProps = HTMLElementProps<'ol'> & DarkModeProps;

packages/ordered-list/src/OrderedList/index.ts

@@ -0,0 +1 @@
+export { OrderedList } from './OrderedList';

packages/ordered-list/src/OrderedListContext/OrderedListContext.ts

@@ -0,0 +1,11 @@
+import {
+  createDescendantsContext,
+  useDescendantsContext,
+} from '@leafygreen-ui/descendants';
+
+export const OrderedListContext =
+  createDescendantsContext<HTMLLIElement>('OrderedListContext');
+
+export function useOrderedListContext() {
+  return useDescendantsContext(OrderedListContext);
+}

packages/ordered-list/src/OrderedListContext/index.ts

@@ -0,0 +1,4 @@
+export {
+  OrderedListContext,
+  useOrderedListContext,
+} from './OrderedListContext';

packages/ordered-list/src/OrderedListItem/OrderedListItem.styles.ts

@@ -0,0 +1,41 @@
+import { css } from '@leafygreen-ui/emotion';
+import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { color, spacing } from '@leafygreen-ui/tokens';
+
+export const stepIconClassName = createUniqueClassName('step');
+
+const MARKER_SIZE = 20;
+
+export const baseStyles = css`
+  display: flex;
+  gap: ${spacing[200]}px;
+  margin-bottom: ${spacing[100]}px;
+`;
+
+export const contentStyles = css`
+  width: 100%;
+`;
+
+export const markerStyles = css`
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid;
+  width: ${MARKER_SIZE}px;
+  height: ${MARKER_SIZE}px;
+  position: relative;
+  font-size: 12px;
+  font-weight: 500;
+`;
+
+export const titleStyles = css`
+  font-weight: bold;
+  line-height: unset;
+`;
+
+export const getThemedStateStyles = (theme: Theme) => css`
+  color: ${color[theme].text.primary.default};
+  background-color: rgba(255, 255, 255, 0);
+  border-color: ${color[theme].border.primary.default};
+`;