LG-4193: Inline links (#2291)

* wip, typo stories * added stories for each typography component * add changeset * update decorator * some hover and focus states * remove decorator * clean up * add darkmode control * change to major * rename stories to basic * add BaseFontSize * add changeset * change storu url * fix external icon position * better match * testing random change * revert change * remove again * revert again --------- Co-authored-by: Stephen Lee <[email protected]>
mongodb · Apr 10, 2024 · dfd6972 · dfd6972
1 parent 7f68e0c
commit dfd6972
Show file tree

Hide file tree

Showing 21 changed files with 525 additions and 8 deletions.
diff --git a/.changeset/flat-keys-compare.md b/.changeset/flat-keys-compare.md
@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/typography': major
+---
+
+- Fixes the `Link` component so that:
+  - links are inline with the text preceding it
+  - The Arrow Icon is inline with the last line of text. Previously it rendered in a column next to the text because of `display: inline-flex`
+- Adds generated stories for each `Typography` component
diff --git a/.changeset/good-eagles-itch.md b/.changeset/good-eagles-itch.md
@@ -0,0 +1,5 @@
+---
+'@lg-tools/storybook-utils': patch
+---
+
+Adds `data-lgid` to `storybookExcludedControlParams` and `storybookExcludedArgTypes`.
diff --git a/packages/typography/src/Body/Body.stories.tsx b/packages/typography/src/Body/Body.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import Body from './Body';
+import { BodyProps } from './Body.types';
+
+export const Basic = ({ children, ...rest }: BodyProps) => {
+  return <Body {...rest}>{children}</Body>;
+};
+
+const meta: StoryMetaType<typeof Body> = {
+  title: 'Components/Typography/Body',
+  component: Body,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+        weight: ['regular', 'medium'],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/Description/Description.stories.tsx b/packages/typography/src/Description/Description.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import Description from './Description';
+import { DescriptionProps } from './Description.types';
+
+export const Basic = ({ children, ...rest }: DescriptionProps) => {
+  return <Description {...rest}>{children}</Description>;
+};
+
+const meta: StoryMetaType<typeof Description> = {
+  title: 'Components/Typography/Description',
+  component: Description,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+        disabled: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/Disclaimer/Disclaimer.stories.tsx b/packages/typography/src/Disclaimer/Disclaimer.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import Disclaimer from './Disclaimer';
+import { DisclaimerProps } from './Disclaimer.types';
+
+export const Basic = ({ children, ...rest }: DisclaimerProps) => {
+  return <Disclaimer {...rest}>{children}</Disclaimer>;
+};
+
+const meta: StoryMetaType<typeof Disclaimer> = {
+  title: 'Components/Typography/Disclaimer',
+  component: Disclaimer,
+  parameters: {
+    default: 'LiveExample',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/Error/Error.stories.tsx b/packages/typography/src/Error/Error.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import Error from './Error';
+import { ErrorProps } from './Error.types';
+
+export const Basic = ({ children, ...rest }: ErrorProps) => {
+  return <Error {...rest}>{children}</Error>;
+};
+
+const meta: StoryMetaType<typeof Error> = {
+  title: 'Components/Typography/Error',
+  component: Error,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/H1/H1.stories.tsx b/packages/typography/src/H1/H1.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import H1 from './H1';
+import { H1Props } from './H1.types';
+
+export const Basic = ({ children, ...rest }: H1Props) => {
+  return <H1 {...rest}>{children}</H1>;
+};
+
+const meta: StoryMetaType<typeof H1> = {
+  title: 'Components/Typography/H1',
+  component: H1,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/H2/H2.stories.tsx b/packages/typography/src/H2/H2.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import H2 from './H2';
+import { H2Props } from './H2.types';
+
+export const Basic = ({ children, ...rest }: H2Props) => {
+  return <H2 {...rest}>{children}</H2>;
+};
+
+const meta: StoryMetaType<typeof H2> = {
+  title: 'Components/Typography/H2',
+  component: H2,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/H3/H3.stories.tsx b/packages/typography/src/H3/H3.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import H3 from './H3';
+import { H3Props } from './H3.types';
+
+export const Basic = ({ children, ...rest }: H3Props) => {
+  return <H3 {...rest}>{children}</H3>;
+};
+
+const meta: StoryMetaType<typeof H3> = {
+  title: 'Components/Typography/H3',
+  component: H3,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/InlineCode/InlineCode.stories.tsx b/packages/typography/src/InlineCode/InlineCode.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import InlineCode from './InlineCode';
+import { InlineCodeProps } from './InlineCode.types';
+
+export const Basic = ({ children, ...rest }: InlineCodeProps) => {
+  // @ts-ignore
+  return <InlineCode {...rest}>{children}</InlineCode>;
+};
+
+const meta: StoryMetaType<typeof InlineCode> = {
+  title: 'Components/Typography/InlineCode',
+  component: InlineCode,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+        href: ['https://www.mongodb.design/', undefined],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/InlineKeyCode/InlineKeyCode.stories.tsx b/packages/typography/src/InlineKeyCode/InlineKeyCode.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { css } from '@leafygreen-ui/emotion';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import InlineKeyCode from './InlineKeyCode';
+import { InlineKeyCodeProps } from './InlineKeyCode.types';
+
+export const Basic = ({ children, ...rest }: InlineKeyCodeProps) => {
+  return (
+    <div
+      className={css`
+        display: block;
+      `}
+    >
+      <InlineKeyCode {...rest}>{children}</InlineKeyCode>
+      <br></br>
+      <InlineKeyCode {...rest}>CTRL</InlineKeyCode>
+      <code> + </code>
+      <InlineKeyCode {...rest}>C</InlineKeyCode>
+    </div>
+  );
+};
+
+const meta: StoryMetaType<typeof InlineKeyCode> = {
+  title: 'Components/Typography/InlineKeyCode',
+  component: InlineKeyCode,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/Label/Label.stories.tsx b/packages/typography/src/Label/Label.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import Label from './Label';
+import { LabelProps } from './Label.types';
+
+export const Basic = ({ children, ...rest }: LabelProps) => {
+  return <Label {...rest}>{children}</Label>;
+};
+
+const meta: StoryMetaType<typeof Label> = {
+  title: 'Components/Typography/Label',
+  component: Label,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+        disabled: [false, true],
+      },
+    },
+  },
+  args: {
+    children: 'Lorem ipsum dolor sit amet',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;
diff --git a/packages/typography/src/Link/BackLink/BackLink.stories.tsx b/packages/typography/src/Link/BackLink/BackLink.stories.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { type StoryMetaType } from '@lg-tools/storybook-utils';
+
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+
+import BackLink from './BackLink';
+import { BackLinkProps } from './BackLink.types';
+
+export const Basic = ({ children, ...rest }: BackLinkProps) => {
+  // @ts-ignore
+  return <BackLink {...rest}>{children}</BackLink>;
+};
+
+const meta: StoryMetaType<typeof BackLink> = {
+  title: 'Components/Typography/BackLink',
+  component: BackLink,
+  parameters: {
+    default: 'Basic',
+    generate: {
+      combineArgs: {
+        // @ts-expect-error - data-hover is not a prop
+        'data-hover': [false, true],
+        'data-focus': [false, true],
+        darkMode: [false, true],
+        baseFontSize: Object.values(BaseFontSize),
+      },
+      excludeCombinations: [
+        {
+          // @ts-expect-error - data-hover is not a prop
+          'data-hover': true,
+          'data-focus': true,
+        },
+      ],
+    },
+  },
+  args: {
+    href: 'https://www.mongodb.design/',
+    children: 'Lorem ipsum',
+    darkMode: false,
+  },
+};
+export default meta;
+
+export const Generated = () => <></>;