@redsift/dashboard 7.2.1 → 7.4.0-alpha.0

package/CONTRIBUTING.md

@@ -32,7 +32,7 @@ The Design System is following a monorepo architecture, providing multiple packa
 
 - `@redsift/icons`
 
-  This package provides icons based on [Material Design Icon](https://materialdesignicons.com/) library.
+  This package provides icons based on [Material Design Icon](https://pictogrammers.com/library/mdi/) library.
 
 - `@redsift/design-system`
 
@@ -123,7 +123,7 @@ import { Comp } from '~/types';
 import { StyledBadge } from './styles';
 import { BadgeProps } from './types';
 
-const COMPONENT_NAME = 'RedSiftBadge';
+const COMPONENT_NAME = 'Badge';
 const CLASSNAME = 'redsift-badge';
 const DEFAULT_PROPS: Partial<BadgeProps> = {
   // default values

package/index.d.ts

@@ -54,6 +54,7 @@ type Comp<P, T = HTMLElement> = {
 };
 /** Get types of the values of a record. */
 type ValueOf<T extends Record<any, any>> = T[keyof T];
+
 /**
  * Color palette.
  */
@@ -77,6 +78,93 @@ declare const ProductColorPalette: {
 };
 type ProductColorPalette = ValueOf<typeof ProductColorPalette>;
 
+declare const AlignSelf: {
+    readonly auto: "auto";
+    readonly normal: "normal";
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly 'self-start': "self-start";
+    readonly 'self-end': "self-end";
+    readonly baseline: "baseline";
+    readonly stretch: "stretch";
+};
+type AlignSelf = ValueOf<typeof AlignSelf>;
+interface LayoutProps {
+    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
+    flex?: string;
+    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
+    flexGrow?: number;
+    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
+    flexShrink?: number;
+    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
+    flexBasis?: string;
+    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
+    alignSelf?: AlignSelf;
+    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
+    justifySelf?: string;
+    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
+    order?: number;
+    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
+    gridArea?: string;
+    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
+    gridColumn?: string;
+    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
+    gridRow?: string;
+    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
+    gridColumnStart?: string;
+    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
+    gridColumnEnd?: string;
+    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
+    gridRowStart?: string;
+    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
+    gridRowEnd?: string;
+}
+interface SpacingProps {
+    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
+    margin?: string;
+    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
+    marginBottom?: string;
+    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
+    marginLeft?: string;
+    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
+    marginRight?: string;
+    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
+    marginTop?: string;
+}
+interface SizingProps {
+    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
+    height?: string | number;
+    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
+    maxHeight?: string;
+    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
+    maxWidth?: string;
+    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
+    minHeight?: string;
+    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
+    minWidth?: string;
+    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
+    width?: string | number;
+}
+interface PositioningProps {
+    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
+    position?: string;
+    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
+    top?: string;
+    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
+    bottom?: string;
+    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
+    left?: string;
+    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
+    right?: string;
+    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
+    zIndex?: string;
+}
+interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
+}
+
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -121,11 +209,11 @@ type ButtonVariant = ValueOf<typeof ButtonVariant>;
 /**
  * Component color.
  */
-type ButtonColor = typeof ColorPalette.default | typeof ColorPalette.error | ProductColorPalette;
+type ButtonColor = ColorPalette | ProductColorPalette;
 /**
  * Component props.
  */
-interface ButtonProps extends ComponentProps<'button'> {
+interface ButtonProps extends ComponentProps<'button'>, StylingProps {
     /** Color variant. The product colors are available but should only be used to display the Button in the color of another product. To display a Button with a color of the current product, use `default`. */
     color?: ButtonColor;
     /** Whether the component take the full width or not. */
@@ -134,6 +222,8 @@ interface ButtonProps extends ComponentProps<'button'> {
     isActive?: boolean;
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
+    /** Whether the component is in a loading state or not. */
+    isLoading?: boolean;
     /**
      * Icon path data (`d` property of the `path` SVG element).<br />
      * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />