@iota/apps-ui-kit 0.2.1 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @iota/apps-ui-kit
 
+## 0.5.0
+
+### Minor Changes
+
+-   a4b46bc: add more badge types
+
+### Patch Changes
+
+-   6d274df: make renderSuggestion prop optional in Search component
+-   976e7f8: Add heightFull configuration props to Table component
+-   bb45cb5: Add new type for CardImage component
+-   Updated dependencies [a4b46bc]
+    -   @iota/apps-ui-icons@0.3.0
+
+## 0.4.0
+
+### Minor Changes
+
+-   a3f08da: add toggle component
+
+### Patch Changes
+
+-   1ad39f9: Update dependencies
+-   4e4f710: replace supportingText from string to ReactNode in InfoBox component
+-   d0cb92e: manage unreachable images by displaying a placeholder instead in VisualAssetCard
+
+## 0.3.0
+
+### Minor Changes
+
+-   3b8b320: update input styles for darkmode
+-   b28a0be: Improve search input behavior:
+
+    -   Allow navigation through suggestions with arrow up/down keys
+    -   Select suggestion on Enter
+
+### Patch Changes
+
+-   b83b198: improve darkmode styles for destructive button
+-   b06e657: Improve styling for small screens
+-   9f4c5e4: Enhance snackbar and infobox with warning type. Update styles for default type.
+-   2bd31a2: fix tooltip max-width
+-   Updated dependencies [8f73b75]
+    -   @iota/apps-ui-icons@0.2.2
+
+## 0.2.2
+
+### Patch Changes
+
+-   c0ef9f2: Update scrollbar styles for firefox and add firefox only class selector
+
 ## 0.2.1
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,16 @@
+# `@iota/apps-ui-kit`
+
+## Usage
+
+Installation:
+
+```bash
+# Replace with npm, yarn, bun, etc.
+pnpm install @iota/apps-ui-kit
+```
+
+Importing:
+
+```typescript
+import { Button } from '@iota/apps-ui-kit';
+```

package/dist/index.d.ts

@@ -25,7 +25,7 @@ declare interface AccordionContentProps {
     isExpanded: boolean;
 }
 
-export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, hideBorder, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
+export declare function AccordionHeader({ onToggle, children, isExpanded, hideArrow, }: PropsWithChildren<AccordionHeaderProps>): JSX_2.Element;
 
 export declare interface AccordionHeaderProps {
     /**
@@ -178,7 +178,10 @@ declare interface BadgeProps {
 export declare enum BadgeType {
     Neutral = "neutral",
     PrimarySolid = "primary-solid",
-    PrimarySoft = "primary-fill"
+    PrimarySoft = "primary-fill",
+    Success = "success",
+    Warning = "warning",
+    Error = "error"
 }
 
 export declare interface BaseInputProps extends InputWrapperProps {
@@ -353,7 +356,7 @@ export declare enum CardActionType {
     Button = "button"
 }
 
-export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, }: CardBodyProps): JSX_2.Element;
+export declare function CardBody({ title, subtitle, clickableAction, icon, isTextTruncated, tooltipText, tooltipPosition, }: CardBodyProps): JSX_2.Element;
 
 export declare type CardBodyProps = {
     title: string;
@@ -361,6 +364,8 @@ export declare type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
 };
 
 export declare function CardImage({ type, shape, url, children, }: CardImageProps): JSX_2.Element;
@@ -620,6 +625,7 @@ export declare enum ImageShape {
 export declare enum ImageType {
     Placeholder = "placeholder",
     BgSolid = "bg-solid",
+    BgWhite = "bg-white",
     BgTransparent = "bg-transparent"
 }
 
@@ -637,7 +643,7 @@ export declare interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */
@@ -655,7 +661,9 @@ export declare enum InfoBoxStyle {
 
 export declare enum InfoBoxType {
     Default = "default",
-    Error = "error"
+    Error = "error",
+    Success = "success",
+    Warning = "warning"
 }
 
 export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
@@ -776,6 +784,12 @@ export declare const IOTA_PRIMITIVES_COLOR_PALETTE: {
         '98': string;
         '100': string;
     };
+    warning: {
+        '10': string;
+        '20': string;
+        '60': string;
+        '90': string;
+    };
 };
 
 export declare function KeyValueInfo({ keyText, value, tooltipPosition, tooltipText, supportingLabel, size, isTruncated, copyText, onCopySuccess, onCopyError, fullwidth, isReverse, valueHoverTitle, }: KeyValueProps): React.JSX.Element;
@@ -925,7 +939,7 @@ export declare interface LoadingIndicatorProps {
     testId?: string;
 }
 
-export declare function Navbar({ items, activeId, onClickItem, isCollapsable, onToggleNavbar, }: NavbarProps): JSX_2.Element;
+export declare function Navbar({ items, activeId, onClickItem, isCollapsible, onToggleNavbar, }: NavbarProps): JSX_2.Element;
 
 export declare function NavbarItem(props: NavbarItemProps): React.JSX.Element;
 
@@ -971,9 +985,9 @@ export declare type NavbarItemWithId = NavbarItemProps_2 & {
 
 export declare interface NavbarProps {
     /**
-     * If this flag is true we need to leave only the icon and collapsable button
+     * If this flag is true we need to leave only the icon and collapsible button
      */
-    isCollapsable?: boolean;
+    isCollapsible?: boolean;
     /**
      * List of elements to be displayed in the navbar.
      */
@@ -987,7 +1001,7 @@ export declare interface NavbarProps {
      */
     onClickItem: (id: string) => void;
     /**
-     * If the navbar is collapsable, this flag indicates if it is open or not.
+     * If the navbar is collapsible, this flag indicates if it is open or not.
      */
     isOpen?: boolean;
     /**
@@ -1116,7 +1130,7 @@ export declare interface SearchProps {
     /**
      * Render suggestion.
      */
-    renderSuggestion: (suggestion: Suggestion, index: number) => React.ReactNode;
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
 }
 
 export declare function SegmentedButton({ type, children, shape, }: PropsWithChildren<SegmentedButtonProps>): React.JSX.Element;
@@ -1303,7 +1317,9 @@ export declare interface SnackbarProps {
 
 export declare enum SnackbarType {
     Default = "default",
-    Error = "error"
+    Error = "error",
+    Warning = "warning",
+    Success = "success"
 }
 
 export declare interface Suggestion {
@@ -1313,7 +1329,7 @@ export declare interface Suggestion {
     type?: string;
 }
 
-export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, }: PropsWithChildren<TableProps>): JSX.Element;
+export declare function Table({ paginationOptions, action, supportingLabel, selectedRowIndexes, rowIndexes, children, pageSizeSelector, heightFull, }: PropsWithChildren<TableProps>): JSX.Element;
 
 export declare function TableActionButton(props: PropsWithChildren<ButtonProps>): JSX_2.Element;
 
@@ -1346,7 +1362,7 @@ export declare interface TableCellTextProps {
 
 export declare function TableHeader({ children }: PropsWithChildren): JSX.Element;
 
-export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, }: TableHeaderCellProps): JSX.Element;
+export declare function TableHeaderCell({ label, columnKey, hasSort, hasCheckbox, isChecked, isIndeterminate, isContentCentered, onSortClick, onCheckboxChange, sortOrder, }: TableHeaderCellProps): JSX.Element;
 
 export declare interface TableHeaderCellProps {
     /**
@@ -1393,6 +1409,10 @@ export declare interface TableHeaderCellProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * Sort order when cell is initialized
+     */
+    sortOrder?: TableHeaderCellSortOrder;
 }
 
 export declare enum TableHeaderCellSortOrder {
@@ -1466,6 +1486,10 @@ export declare type TableProps = {
      * The page size selector component.
      */
     pageSizeSelector?: ReactNode;
+    /**
+     * If the table should take the full height of the parent.
+     */
+    heightFull?: boolean;
 };
 
 export declare function TableRow({ children, leading, }: PropsWithChildren<{
@@ -1514,7 +1538,7 @@ declare interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
     isResizeEnabled?: boolean;
 }
 
-export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, }: TitleProps): JSX_2.Element;
+export declare function Title({ title, subtitle, trailingElement, tooltipText, supportingElement, tooltipPosition, size, testId, }: TitleProps): JSX_2.Element;
 
 declare interface TitleProps {
     /**
@@ -1545,6 +1569,10 @@ declare interface TitleProps {
      * The size of the component
      */
     size?: TitleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
 }
 
 export declare enum TitleSize {
@@ -1552,7 +1580,54 @@ export declare enum TitleSize {
     Medium = "medium"
 }
 
-export declare function Tooltip({ text, position, children, }: PropsWithChildren<TooltipProps>): React.JSX.Element;
+export declare const Toggle: ForwardRefExoticComponent<ToggleProps & RefAttributes<HTMLInputElement>>;
+
+export declare enum ToggleLabelPosition {
+    Left = "left",
+    Right = "right"
+}
+
+declare interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export declare enum ToggleSize {
+    Small = "small",
+    Default = "default"
+}
+
+export declare function Tooltip({ text, position, maxWidth, children, }: PropsWithChildren<TooltipProps>): React.JSX.Element;
 
 export declare enum TooltipPosition {
     Top = "top",
@@ -1564,6 +1639,7 @@ export declare enum TooltipPosition {
 declare interface TooltipProps {
     text: string;
     position?: TooltipPosition;
+    maxWidth?: string;
 }
 
 export declare function truncate(value: string, startLength?: number, endLength?: number): string;