@stoplight/mosaic - npm Package Compare versions

Comparing version 1.19.1 to 1.20.0

components/Avatar/Avatar.d.ts

 import * as React from 'react';
 import { CSSProperties } from 'react';
-import { IMarginProps } from '../../enhancers';
+import { BorderProps, IMarginProps } from '../../enhancers';
 import { IIconProps } from '../Icon';
-declare type BaseAvatarProps = IMarginProps & {
-    size?: 'sm' | 'md' | 'lg';
+export declare type AvatarProps = IMarginProps & Pick<BorderProps, 'border' | 'borderColor'> & {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     className?: string;
+    /**
+     * Optional background color.
+     *
+     * - If `fg` is set then `bg` defaults to a lighter shade of `fg`
+     * - If `fg` is not set and `name` is set, then `bg` defaults to a random color that is generated based on the `name` value.
+     */
     bg?: CSSProperties['backgroundColor'];
+    /**
+     * Optional foreground color.
+     */
+    fg?: CSSProperties['color'];
+    /**
+     * The name of the entity in the avatar.
+     *
+     * - if `src` is also set, the name will be used in the `alt` attribute of the image.
+     * - If `src` is not set, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * @deprecated Use `name` instead.
+     */
+    letter?: string;
+    /**
+     * The image url of the `Avatar`
+     */
+    src?: string;
+    /**
+     * The icon to use in the `Avatar`.
+     */
+    icon?: IIconProps['icon'];
+    /**
+     * @deprecated Omit `name`, `src`, and `icon` to get equivalent "blank/spacer" avatar.
+     */
+    blank?: true;
+    /**
+     * Optionally force an inverted icon.
+     *
+     * `isInverted` defaults to true when an avatar is rendered in dark mode context.
+     */
+    isInverted?: boolean;
+    /**
+     * Do not set a title or alt attribute. Useful if handling this another way, for example with a wrapping tooltip.
+     */
+    noTitleAlt?: boolean;
 };
-export declare type ImageAvatarProps = BaseAvatarProps & {
-    imageUrl: string;
-};
-export declare type IconAvatarProps = BaseAvatarProps & {
-    icon: IIconProps['icon'];
-};
-export declare type LetterAvatarProps = BaseAvatarProps & {
-    letter: string;
-};
-export declare type BlankAvatarProps = BaseAvatarProps & {
-    blank: true;
-};
-export declare type AvatarProps = ImageAvatarProps | IconAvatarProps | LetterAvatarProps | BlankAvatarProps;
-export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>>;
-export {};
+export declare const Avatar: React.MemoExoticComponent<React.ForwardRefExoticComponent<IMarginProps & Pick<BorderProps, "border" | "borderColor"> & {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    className?: string;
+    /**
+     * Optional background color.
+     *
+     * - If `fg` is set then `bg` defaults to a lighter shade of `fg`
+     * - If `fg` is not set and `name` is set, then `bg` defaults to a random color that is generated based on the `name` value.
+     */
+    bg?: CSSProperties['backgroundColor'];
+    /**
+     * Optional foreground color.
+     */
+    fg?: CSSProperties['color'];
+    /**
+     * The name of the entity in the avatar.
+     *
+     * - if `src` is also set, the name will be used in the `alt` attribute of the image.
+     * - If `src` is not set, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * @deprecated Use `name` instead.
+     */
+    letter?: string;
+    /**
+     * The image url of the `Avatar`
+     */
+    src?: string;
+    /**
+     * The icon to use in the `Avatar`.
+     */
+    icon?: IIconProps['icon'];
+    /**
+     * @deprecated Omit `name`, `src`, and `icon` to get equivalent "blank/spacer" avatar.
+     */
+    blank?: true;
+    /**
+     * Optionally force an inverted icon.
+     *
+     * `isInverted` defaults to true when an avatar is rendered in dark mode context.
+     */
+    isInverted?: boolean;
+    /**
+     * Do not set a title or alt attribute. Useful if handling this another way, for example with a wrapping tooltip.
+     */
+    noTitleAlt?: boolean;
+} & React.RefAttributes<HTMLDivElement>>>;

enhancers/spacing.d.ts

 import { EnhancerFn } from './types';
-export declare type SpaceVals = 'auto' | 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 60 | 80;
-export declare type NegativeSpaceVals = '-px' | -0 | -0.5 | -1 | -1.5 | -2 | -2.5 | -3 | -3.5 | -4 | -5 | -6 | -7 | -8 | -9 | -10 | -11 | -12 | -14 | -16 | -20 | -24 | -32 | -40 | -60 | -80;
+export declare type SpaceVals = 'auto' | 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 60 | 80;
+export declare type NegativeSpaceVals = '-px' | -0 | -0.5 | -1 | -1.5 | -2 | -2.5 | -3 | -3.5 | -4 | -4.5 | -5 | -6 | -7 | -8 | -9 | -10 | -11 | -12 | -14 | -16 | -20 | -24 | -32 | -40 | -60 | -80;
 export interface IMarginProps {
@@ -5,0 +5,0 @@ m?: SpaceVals | NegativeSpaceVals;

package.json

 {
   "name": "@stoplight/mosaic",
-  "version": "1.19.1",
+  "version": "1.20.0",
   "sideEffects": false,
@@ -19,2 +19,3 @@ "license": "Apache-2.0",
     "clsx": "^1.1.1",
+    "react-fast-compare": "^3.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -29,3 +30,2 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "nano-memoize": "^1.2.1",
-    "react-fast-compare": "^3.2.0",
     "copy-to-clipboard": "^3.3.1",
@@ -32,0 +32,0 @@ "dom-helpers": "^3.3.1",

utils/color-manipulation.d.ts

@@ -10,1 +10,8 @@ export declare type HslColor2 = {
 export declare const stringifyHsl: (hsl: HslColor2) => string;
+export declare const randomColorFromString: (str: string) => string;
+/**
+ * Returns white or black, based on which provides higher contrast when rendered on top of the passed in `color`.
+ * @param color - the color in hex, rgb, or hsl
+ * @param leeway - integer from -10 to 10. The more positive the number, the more that white will be weighted. Defaults to 0.
+ */
+export declare const readableColor: (color: string, leeway?: number) => "#000" | "#fff";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3837808

increased by1.44%

Number of package files

185

increased by2.21%

Lines of code

33627

increased by1.79%

No dependency changes