Merge branch 'main' into adam/upgrade-babel

mongodb · Apr 2, 2024 · bbb9332 · bbb9332
2 parents 833ab65 + 04aa188
commit bbb9332
Show file tree

Hide file tree

Showing 26 changed files with 178 additions and 159 deletions.
diff --git a/.changeset/quick-tables-accept.md b/.changeset/quick-tables-accept.md
@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/loading-indicator': patch
+---
+
+- Horizontally centers loading indicator with description
+- Deletes duplicate `LoadingIndicators.styles.ts` file
diff --git a/.changeset/twenty-hotels-swim.md b/.changeset/twenty-hotels-swim.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/logo': minor
+---
+
+Exports `LogoProps` from package
diff --git a/.gitignore b/.gitignore
@@ -37,10 +37,10 @@ coverage/
 
 # Exported TSDocs example files
 parsed-docs.json
-packages/**/tsdoc.json
+**/tsdoc.json
 
 # Compiled story files
-packages/**/stories.js*
+**/stories.js*
 
 # Local yarn releases
 .yarn

diff --git a/packages/loading-indicator/src/LoadingIndicator.stories.tsx b/packages/loading-indicator/src/LoadingIndicator.stories.tsx
@@ -74,5 +74,5 @@ const Template: StoryFn<typeof Spinner> = (
 
 export const LiveExample = Template.bind({});
 LiveExample.args = {
-  description: 'Loading...',
+  description: 'Loading dot dot...',
 };
diff --git a/packages/loading-indicator/src/LoadingIndicators.styles.ts b/packages/loading-indicator/src/LoadingIndicators.styles.ts
diff --git a/packages/loading-indicator/src/PageLoader/PageLoader.stories.tsx b/packages/loading-indicator/src/PageLoader/PageLoader.stories.tsx
@@ -26,5 +26,5 @@ export const Default = Template.bind({});
 
 export const WithDescription = Template.bind({});
 WithDescription.args = {
-  description: 'Loading...',
+  description: 'Loading dot dot...',
 };
diff --git a/packages/loading-indicator/src/PageLoader/PageLoader.styles.ts b/packages/loading-indicator/src/PageLoader/PageLoader.styles.ts
@@ -9,5 +9,7 @@ export const blobStyles = {
 };
 
 export const rootStyles = css`
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
diff --git a/packages/loading-indicator/src/Spinner/Spinner.stories.tsx b/packages/loading-indicator/src/Spinner/Spinner.stories.tsx
@@ -29,13 +29,13 @@ export const Default = Template.bind({});
 
 export const WithDescription = Template.bind({});
 WithDescription.args = {
-  description: 'Loading...',
+  description: 'Loading dot dot...',
 };
 
 export const Horizontal = Template.bind({});
 Horizontal.args = {
   displayOption: 'default-horizontal',
-  description: 'Loading...',
+  description: 'Loading dot dot...',
 };
 
 export const SizeOverride = Template.bind({});

diff --git a/packages/loading-indicator/src/Spinner/Spinner.styles.ts b/packages/loading-indicator/src/Spinner/Spinner.styles.ts
@@ -21,7 +21,8 @@ export const SpinnerBottomMargins: Record<DisplayOption, number> = {
 
 // Styles
 export const rootStyles = css`
-  text-align: center;
+  display: flex;
+  align-items: center;
 `;
 
 export const darkModeSpinnerStyles = css`
@@ -37,7 +38,9 @@ export const colorOverrideStyles = (color: string) => css`
 `;
 
 export const horizontalDisplayOptionStyles = css`
-  display: flex;
-  align-items: center;
   gap: 6px;
 `;
+
+export const verticalDisplayOptionStyles = css`
+  flex-direction: column;
+`;
diff --git a/packages/loading-indicator/src/Spinner/Spinner.tsx b/packages/loading-indicator/src/Spinner/Spinner.tsx
@@ -17,6 +17,7 @@ import {
   rootStyles,
   SpinnerBottomMargins,
   SpinnerSizes,
+  verticalDisplayOptionStyles,
 } from './Spinner.styles';
 import { DisplayOption, SpinnerProps } from './Spinner.types';
 
@@ -45,6 +46,8 @@ const Spinner = ({
         {
           [horizontalDisplayOptionStyles]:
             displayOption === DisplayOption.DefaultHorizontal,
+          [verticalDisplayOptionStyles]:
+            displayOption !== DisplayOption.DefaultHorizontal,
         },
         className,
       )}

diff --git a/packages/logo/src/Logo.stories.tsx b/packages/logo/src/Logo.stories.tsx
@@ -4,8 +4,7 @@ import { StoryFn } from '@storybook/react';
 
 import { css } from '@leafygreen-ui/emotion';
 
-import { LogoNames } from './Logo';
-import { LogoProps, SupportedColors } from './utils';
+import { BaseLogoProps, LogoNames, SupportedColors } from './Logo.types';
 import {
   AtlasForGovernmentLogoLockup,
   AtlasLogoLockup,
@@ -99,8 +98,8 @@ const divStyle = css`
   margin: 0.5rem;
 `;
 
-export const LiveExample: StoryFn<LogoProps & { name: LogoName }> = (
-  args: LogoProps & { name: LogoName },
+export const LiveExample: StoryFn<BaseLogoProps & { name: LogoName }> = (
+  args: BaseLogoProps & { name: LogoName },
 ) => {
   if (!args.name) {
     args = { ...args, name: 'MongoDBLogo' };
@@ -125,9 +124,9 @@ LiveExample.parameters = {
 
 const Template = (
   LogoComponent: React.ForwardRefExoticComponent<
-    Omit<LogoProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+    Omit<BaseLogoProps, 'ref'> & React.RefAttributes<SVGSVGElement>
   >,
-  args: LogoProps,
+  args: BaseLogoProps,
 ) => {
   const containerStyle = css`
     ${divStyle}
@@ -140,28 +139,30 @@ const Template = (
 };
 
 // Individual Components
-export const MongoDB = (args: LogoProps) => Template(MongoDBLogo, args);
-export const Atlas = (args: LogoProps) => Template(AtlasNavGraphic, args);
-export const MongoDBMark = (args: LogoProps) => Template(MongoDBLogoMark, args);
-export const AtlasLockup = (args: LogoProps) => Template(AtlasLogoLockup, args);
-export const AtlasForGovernmentLockup = (args: LogoProps) =>
+export const MongoDB = (args: BaseLogoProps) => Template(MongoDBLogo, args);
+export const Atlas = (args: BaseLogoProps) => Template(AtlasNavGraphic, args);
+export const MongoDBMark = (args: BaseLogoProps) =>
+  Template(MongoDBLogoMark, args);
+export const AtlasLockup = (args: BaseLogoProps) =>
+  Template(AtlasLogoLockup, args);
+export const AtlasForGovernmentLockup = (args: BaseLogoProps) =>
   Template(AtlasForGovernmentLogoLockup, args);
-export const EnterpriseAdvancedLockup = (args: LogoProps) =>
+export const EnterpriseAdvancedLockup = (args: BaseLogoProps) =>
   Template(EnterpriseAdvancedLogoLockup, args);
-export const CommunityEditionLockup = (args: LogoProps) =>
+export const CommunityEditionLockup = (args: BaseLogoProps) =>
   Template(CommunityEditionLogoLockup, args);
-export const UniversityLockup = (args: LogoProps) =>
+export const UniversityLockup = (args: BaseLogoProps) =>
   Template(UniversityLogoLockup, args);
 
 // Deprecated
 // @ts-ignore deprecated component
-export const AtlasMark = (args: LogoProps) => Template(AtlasLogoMark, args);
+export const AtlasMark = (args: BaseLogoProps) => Template(AtlasLogoMark, args);
 AtlasMark.storyName = '[DEPRECATED] Atlas Mark';
 // @ts-ignore deprecated component
-export const RealmMark = (args: LogoProps) => Template(RealmLogoMark, args);
+export const RealmMark = (args: BaseLogoProps) => Template(RealmLogoMark, args);
 RealmMark.storyName = '[DEPRECATED] Realm Mark';
 // @ts-ignore deprecated component
-export const ChartsMark = (args: LogoProps) => Template(ChartsLogoMark, args);
+export const ChartsMark = args => Template(ChartsLogoMark, args);
 ChartsMark.storyName = '[DEPRECATED] Charts Mark';
 
 export const Generated = () => {};
diff --git a/packages/logo/src/Logo.tsx b/packages/logo/src/Logo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { LogoProps } from './utils';
+import { LogoProps } from './Logo.types';
 import {
   AtlasForGovernmentLogoLockup,
   AtlasLogoLockup,
@@ -12,35 +12,14 @@ import {
   UniversityLogoLockup,
 } from '.';
 
-export const LogoNames = [
-  'MongoDBLogoMark',
-  'MongoDBLogo',
-  'AtlasNavGraphic',
-  'AtlasLogoLockup',
-  'AtlasForGovernmentLogoLockup',
-  'EnterpriseAdvancedLogoLockup',
-  'CommunityEditionLogoLockup',
-  'UniversityLogoLockup',
-] as const;
-
-export type LogoName = (typeof LogoNames)[number];
-
-interface GenericLogoProps extends LogoProps {
-  /**
-   * The name of the logo to render
-   * @required
-   */
-  name: LogoName;
-}
-
 /**
  * A generic logo component that accepts a logo name as well as other LogoProps.
  *
  * Note: For performance, it's recommended to import a specific logo explicitly rather than rely on this generic component
  */
 const GenericLogo = React.forwardRef(
   (
-    { name = 'MongoDBLogo', ...rest }: GenericLogoProps,
+    { name = 'MongoDBLogo', ...rest }: LogoProps,
     ref: React.Ref<SVGSVGElement> | undefined,
   ) => {
     const LogoMap = {

diff --git a/packages/logo/src/utils.ts → packages/logo/src/Logo.types.ts b/packages/logo/src/utils.ts → packages/logo/src/Logo.types.ts
@@ -1,4 +1,3 @@
-import { css } from '@leafygreen-ui/emotion';
 import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 
@@ -23,7 +22,7 @@ type SupportedColorsMap =
 
 export { SupportedColors, SupportedColorsMap };
 
-export interface LogoProps extends HTMLElementProps<'svg'> {
+export interface BaseLogoProps extends HTMLElementProps<'svg'> {
   /**
    * Determines Color of the Logo or LogoMark component.
    *
@@ -46,57 +45,23 @@ export type ProductLogoProps = HTMLElementProps<'svg', never> & {
   height?: number;
 };
 
-export const getAccessibleProps = ({
-  role,
-  'aria-label': ariaLabel,
-}: {
-  role: string;
-  'aria-label': string;
-}) => {
-  if (role === 'img') {
-    return {
-      role: 'img',
-      'aria-label': ariaLabel,
-    };
-  }
+export const LogoNames = [
+  'MongoDBLogoMark',
+  'MongoDBLogo',
+  'AtlasNavGraphic',
+  'AtlasLogoLockup',
+  'AtlasForGovernmentLogoLockup',
+  'EnterpriseAdvancedLogoLockup',
+  'CommunityEditionLogoLockup',
+  'UniversityLogoLockup',
+] as const;
 
-  return {
-    role: 'presentation',
-    alt: '',
-    'aria-hidden': true,
-  };
-};
-
-export const getColor = ({
-  knockout,
-  size,
-  flat,
-  gradient,
-  darkMode,
-}: {
-  knockout: boolean;
-  darkMode: boolean;
-  size: number;
-  flat: string;
-  gradient: string;
-}) => {
-  let fill;
+export type LogoName = (typeof LogoNames)[number];
 
-  if (!knockout) {
-    if (size <= 10) {
-      fill = flat;
-    } else {
-      fill = gradient;
-    }
-  } else {
-    if (darkMode) {
-      fill = palette.white;
-    } else {
-      fill = palette.black;
-    }
-  }
-
-  return css`
-    fill: ${fill};
-  `;
-};
+export interface LogoProps extends BaseLogoProps {
+  /**
+   * The name of the logo to render
+   * @required
+   */
+  name: LogoName;
+}
diff --git a/...logo/src/AtlasForGovernmentLogoLockup.tsx → ...rc/Logos/AtlasForGovernmentLogoLockup.tsx b/...logo/src/AtlasForGovernmentLogoLockup.tsx → ...rc/Logos/AtlasForGovernmentLogoLockup.tsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { css, cx } from '@leafygreen-ui/emotion';
 
 import {
-  getAccessibleProps,
-  LogoProps,
+  BaseLogoProps,
   SupportedColors,
   SupportedColorsMap,
-} from './utils';
+} from '../Logo.types';
+import { getAccessibleProps } from '../utils';
 
 /**
  * # AtlasForGovernmentLogoLockup
@@ -30,7 +30,7 @@ export const AtlasForGovernmentLogoLockup = React.forwardRef(
       role = 'img',
       'aria-label': ariaLabel = 'MongoDB Logo',
       ...rest
-    }: LogoProps,
+    }: BaseLogoProps,
     ref: React.LegacyRef<SVGSVGElement> | undefined,
   ): ReactElement => {
     const fill = SupportedColorsMap[color];

diff --git a/packages/logo/src/AtlasLogoLockup.tsx → packages/logo/src/Logos/AtlasLogoLockup.tsx b/packages/logo/src/AtlasLogoLockup.tsx → packages/logo/src/Logos/AtlasLogoLockup.tsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { css, cx } from '@leafygreen-ui/emotion';
 
 import {
-  getAccessibleProps,
-  LogoProps,
+  BaseLogoProps,
   SupportedColors,
   SupportedColorsMap,
-} from './utils';
+} from '../Logo.types';
+import { getAccessibleProps } from '../utils';
 
 /**
  * # AtlasLogoLockup
@@ -32,7 +32,7 @@ export const AtlasLogoLockup = React.forwardRef(
       role = 'img',
       'aria-label': ariaLabel = 'MongoDB Logo',
       ...rest
-    }: LogoProps,
+    }: BaseLogoProps,
     ref: React.LegacyRef<SVGSVGElement> | undefined,
   ): ReactElement => {
     const fill = SupportedColorsMap[color];

diff --git a/packages/logo/src/AtlasLogoMark.tsx → packages/logo/src/Logos/AtlasLogoMark.tsx b/packages/logo/src/AtlasLogoMark.tsx → packages/logo/src/Logos/AtlasLogoMark.tsx
@@ -2,7 +2,8 @@ import React from 'react';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 
-import { getAccessibleProps, getColor, ProductLogoProps } from './utils';
+import { ProductLogoProps } from '../Logo.types';
+import { getAccessibleProps, getColor } from '../utils';
 
 /**
  * @deprecated