@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/build/components/types/src/components/Preview/CodeExample.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface CodeExampleProps {
+    codeJSXOptions?: Record<string, any>;
+    codeTypes?: string[];
+    children?: ReactNode;
+    [key: string]: any;
+}
+declare const CodeExample: React.FC<CodeExampleProps>;
+export default CodeExample;

package/build/components/types/src/components/Preview/Interact/ButtonShowPropsGroup.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ButtonShowPropsGroupProps {
+    id: string;
+    componentName: string;
+    deepness: number;
+    onClick: (e: React.MouseEvent) => void;
+    isVisible: boolean;
+}
+declare const ButtonShowPropsGroup: React.FC<ButtonShowPropsGroupProps>;
+export default ButtonShowPropsGroup;

package/build/components/types/src/components/Preview/Interact/Interact.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactElement } from "react";
+interface InteractProps {
+    /** Element id */
+    id?: string;
+    /** Which props should be filtered */
+    filterProps?: string[];
+    /** Render element */
+    render: ReactElement | ((props: any) => ReactElement);
+    /** Parser should skip children */
+    skipChildren?: boolean;
+}
+/**
+ * Component that creates interactive playground
+ * for experimenting with possibilities of components props
+ */
+declare const Interact: React.FC<InteractProps>;
+export default Interact;

package/build/components/types/src/components/Preview/Interact/PropCheckbox.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface PropCheckboxProps {
+    inputProps: {
+        key: string;
+        id: string;
+        name: string;
+        'data-component-id': string;
+    };
+    componentInfo: {
+        id: string;
+        name: string;
+    };
+}
+declare const PropCheckbox: React.FC<PropCheckboxProps>;
+export default PropCheckbox;

package/build/components/types/src/components/Preview/Interact/PropFormField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface PropFormFieldProps {
+    id: string;
+    name: string;
+}
+declare const PropFormField: React.FC<PropFormFieldProps>;
+export default PropFormField;

package/build/components/types/src/components/Preview/Interact/PropInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface PropInputProps {
+    type?: string;
+    isDisabled?: boolean;
+    inputProps: {
+        key: string;
+        id: string;
+        name: string;
+        "data-component-id": string;
+    };
+    componentInfo: {
+        id: string;
+        name: string;
+    };
+}
+declare const PropInput: React.FC<PropInputProps>;
+export default PropInput;

package/build/components/types/src/components/Preview/Interact/PropLabelWithTooltip.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface PropLabelWithTooltipProps {
+    isDisabled?: boolean;
+    inputProps: {
+        key: string;
+        id: string;
+        name: string;
+        "data-component-id": string;
+        input?: React.ReactNode;
+    };
+    componentInfo: {
+        id: string;
+        name: string;
+    };
+}
+declare const PropLabelWithTooltip: React.FC<PropLabelWithTooltipProps>;
+export default PropLabelWithTooltip;

package/build/components/types/src/components/Preview/Interact/PropSelect.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface PropSelectProps {
+    inputProps: {
+        key: string;
+        id: string;
+        name: string;
+        'data-component-id': string;
+    };
+    componentInfo: {
+        id: string;
+        name: string;
+    };
+}
+declare const PropSelect: React.FC<PropSelectProps>;
+export default PropSelect;

package/build/components/types/src/components/Preview/Interact/PropsGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface PropsGroupProps {
+    id: string;
+    showId: string;
+    props: Record<string, any>;
+    docgenProps: Record<string, any>;
+    filteredProps: string[];
+}
+declare const PropsGroup: React.FC<PropsGroupProps>;
+export default PropsGroup;

package/build/components/types/src/components/Preview/Interact/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+interface TooltipProps {
+    children: ReactNode;
+    dialog: string;
+    [key: string]: any;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/build/components/types/src/components/Preview/Interact/helpers.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Cleanup docgen prop value of string which has this form:
+ * "'string'" and converts it to "string"
+ */
+export declare const cleanValue: (s: any) => any;
+/**
+ * Get docgen props of component
+ * if it's an html element we parse just first level of text to be editable
+ * if it's just a string we create docgen type of string
+ */
+export declare const getDocgenProps: (component: any) => Record<string, any>;
+/**
+ * parse displayName of component or create custom name
+ */
+export declare const getDisplayName: (component: any) => string;
+/**
+ * Helper function for comparision
+ */
+export declare const is: (value: any, type: any) => boolean;

package/build/components/types/src/components/Preview/Interact/state.d.ts

@@ -0,0 +1,14 @@
+interface InteractContextType {
+    liveProps: Record<string, any>;
+    showProps: boolean;
+    docgenProps: Record<string, any>;
+    setDeepState: (propName: string, value: any) => void;
+    handleShowProps: (e: React.MouseEvent) => void;
+    handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleSelectChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    isDefaultValue: (propName: string) => boolean;
+    getDefaultValue: (docgen: any) => any;
+}
+declare const InteractContext: import("react").Context<InteractContextType | undefined>;
+export default InteractContext;

package/build/components/types/src/components/Preview/Preview.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, FunctionComponent } from "react";
+import "./styles/style.scss";
+interface PreviewProps {
+    bgTheme?: string | boolean;
+    bgThemeColors?: Record<string, string>;
+    bgThemeExcludedColors?: string[];
+    children?: ReactNode | ((context: {
+        bgTheme: string;
+        bgThemeValue: string;
+    }) => ReactNode);
+    className?: string;
+    code?: ReactNode | ((context: {
+        bgTheme: string;
+        bgThemeValue: string;
+    }) => ReactNode);
+    codeJSXOptions?: Record<string, any>;
+    codeTypes?: string[];
+    enableFullscreen?: boolean;
+    hasCodePreview?: boolean;
+    html?: string;
+    interactiveProps?: Record<string, any>;
+    isInteractive?: boolean;
+    [key: string]: any;
+}
+declare const Preview: FunctionComponent<PreviewProps>;
+export default Preview;

package/build/components/types/src/components/Preview/PreviewTitleBar.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+interface PreviewTitleBarProps {
+    title?: string;
+    actions?: ReactNode[];
+    className?: string;
+    [key: string]: any;
+}
+declare const PreviewTitleBar: React.FC<PreviewTitleBarProps>;
+export default PreviewTitleBar;

package/build/components/types/src/components/Preview/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./styles/style.scss";
+interface ThemedPreviewProps {
+    [key: string]: any;
+}
+declare const ThemedPreview: React.FC<ThemedPreviewProps>;
+export default ThemedPreview;

package/build/components/types/src/components/Progress/Progress.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface ProgressProps {
+    /** Color of the indicator */
+    color?: "orange" | "green" | "yellow" | "red" | "blue";
+    /** Provides clear instruction on what the horizontal bar represents */
+    label: React.ReactNode;
+    /** Textual representation of the indicator */
+    value: React.ReactNode;
+    /** Width of the progress indicator where 0 = empty, 1 = full */
+    width?: number;
+    className?: string;
+    children?: React.ReactNode;
+    colorMode?: "light" | "dark";
+}
+export declare const Progress: React.FC<ProgressProps>;

package/build/components/types/src/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Progress } from "./Progress";

package/build/components/types/src/components/PromoBanner/PromoBanner.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface PromoBannerProps {
+    colorScheme?: "light" | "dark";
+    className?: string;
+    title: string;
+    secondaryTitle?: string;
+    description: string;
+    buttonText: string;
+    image?: string;
+}
+export declare const PromoBanner: ({ title, secondaryTitle, description, buttonText, image, colorScheme, className, }: PromoBannerProps) => React.JSX.Element;
+export {};

package/build/components/types/src/components/PromoBanner/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { PromoBanner } from "./PromoBanner";

package/build/components/types/src/components/PromotionCard/PromotionCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface PromotionCardProps {
+    /** Inverse colors */
+    colorScheme?: 'light' | 'dark';
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const PromotionCard: React.FC<PromotionCardProps>;

package/build/components/types/src/components/PromotionCard/PromotionCardContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PromotionCardContentProps {
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const PromotionCardContent: React.FC<PromotionCardContentProps>;
+export {};

package/build/components/types/src/components/PromotionCard/PromotionCardImageWrapper.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PromotionCardImageWrapperProps {
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const PromotionCardImageWrapper: React.FC<PromotionCardImageWrapperProps>;
+export {};

package/build/components/types/src/components/PromotionCard/PromotionCardSection.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface PromotionCardSectionProps {
+    /** Inverse colors */
+    isInverse?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const PromotionCardSection: React.FC<PromotionCardSectionProps>;

package/build/components/types/src/components/PromotionCard/PromotionCardTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PromotionCardTitleProps {
+    className?: string;
+    children: React.ReactElement;
+    [key: string]: any;
+}
+export declare const PromotionCardTitle: React.FC<PromotionCardTitleProps>;
+export {};

package/build/components/types/src/components/PromotionCard/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const CLASS_ROOT = "promotion-card";
+export declare const CLASS_SECTION = "promotion-card__section";
+export declare const CLASS_CONTENT = "promotion-card__content";
+export declare const CLASS_IMAGE_WRAPPER = "promotion-card__image-wrapper";
+export declare const CLASS_TITLE = "promotion-card__title";

package/build/components/types/src/components/PromotionCard/index.d.ts

@@ -0,0 +1,6 @@
+import "./styles/style.scss";
+export { PromotionCard } from "./PromotionCard";
+export { PromotionCardContent } from "./PromotionCardContent";
+export { PromotionCardImageWrapper } from "./PromotionCardImageWrapper";
+export { PromotionCardSection } from "./PromotionCardSection";
+export { PromotionCardTitle } from "./PromotionCardTitle";

package/build/components/types/src/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Skeleton: React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+export { Skeleton };

package/build/components/types/src/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Skeleton } from "./Skeleton";

package/build/components/types/src/components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,6 @@
+import React, { AnchorHTMLAttributes } from "react";
+interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+}
+declare const SkipLink: React.FC<SkipLinkProps>;
+export { SkipLink };

package/build/components/types/src/components/SkipLink/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { SkipLink } from "./SkipLink";

package/build/components/types/src/components/Stepbar/Stepbar.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export declare const showTitlesFromOptions: readonly ["md", "lg", "xl"];
+export declare const variantOptions: readonly ["default", "inverse"];
+export type ShowTitlesFrom = (typeof showTitlesFromOptions)[number];
+export interface StepbarStep {
+    href?: string;
+    isCurrent?: boolean;
+    title: React.ReactNode;
+}
+export interface StepbarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Arial label of nav element */
+    label?: string;
+    /** Titles of non-current steps are visible from this breakpoint */
+    showTitlesFrom?: ShowTitlesFrom;
+    /** Array of step objects */
+    steps: StepbarStep[];
+    /** Visual variant of the stepbar */
+    colorScheme?: "dark" | "light";
+}
+declare const Stepbar: React.FC<StepbarProps>;
+export { Stepbar };

package/build/components/types/src/components/Stepbar/index.d.ts

@@ -0,0 +1,2 @@
+import "./styles/style.scss";
+export { Stepbar } from "./Stepbar";

package/build/components/types/src/components/Sticker/Sticker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface StickerProps {
+    color?: 'black' | 'orange';
+    size?: 'small';
+    children?: React.ReactNode;
+    className?: string;
+    [key: string]: any;
+}
+export declare const Sticker: React.FC<StickerProps>;
+export {};

package/build/components/types/src/components/Sticker/index.d.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+import { Sticker } from "./Sticker";
+export { Sticker };

package/build/components/types/src/components/Table/Cell.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare const cellTags: readonly ["th", "td"];
+export type CellTag = (typeof cellTags)[number];
+export interface CellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    /** Render cell as */
+    tag?: CellTag;
+    /** Scope attribute for th elements */
+    scope?: string;
+}
+declare const Cell: React.FC<CellProps>;
+export { Cell };

package/build/components/types/src/components/Table/Footer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Footer: React.FC;
+export { Footer };

package/build/components/types/src/components/Table/Header.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Header: React.FC;
+export { Header };

package/build/components/types/src/components/Table/Row.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { TableRow } from "./types";
+interface RowProps {
+    row: TableRow;
+}
+declare const Row: {
+    ({ row }: RowProps): React.JSX.Element[];
+    displayName: string;
+};
+export { Row };

package/build/components/types/src/components/Table/Rows.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Rows: React.FC;
+export { Rows };

package/build/components/types/src/components/Table/Table.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { TableHeader, TableRow, ExpandableRowsCaptions } from "./types";
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Caption helps users with screen readers to find a table and understand what it's about and decide if they want to read it. */
+    caption?: React.ReactNode;
+    expandableRowsCaptions?: ExpandableRowsCaptions;
+    /** Foot element for table */
+    footers?: TableRow[];
+    /** Labels for headers in the table. Value of the key in headers match with the key name in rows */
+    headers: TableHeader[];
+    /** Compact table only takes spaced needed to display its content */
+    isCompact?: boolean;
+    /** If table has horizontal scrollbar */
+    isScrollable?: boolean;
+    /** Different colors for even and odd rows. */
+    isStriped?: boolean;
+    /** rows to print out in the table. */
+    rows: TableRow[];
+    className?: string;
+    /** Sets color scheme */
+    colorScheme?: "dark" | "light";
+}
+declare const Table: React.FC<TableProps>;
+export { Table };

package/build/components/types/src/components/Table/Table.static.d.ts

@@ -0,0 +1,23 @@
+interface TableConfig {
+    expandButtonSelector: string;
+    scrollableContainerSelector: string;
+    responsiveTableSelector: string;
+}
+export declare const defaultConfig: TableConfig;
+export default class Table {
+    private element;
+    private config;
+    private expandButtons;
+    private scrollableContainer;
+    private resizeObserver;
+    constructor(element: HTMLElement, config?: Partial<TableConfig>);
+    private addRole;
+    private addARIA;
+    private onExpandClick;
+    private init;
+    private maybeInitScrollable;
+    destroy(): void;
+    update(): void;
+    static getInstance(el: HTMLElement): Table | null;
+}
+export {};

package/build/components/types/src/components/Table/TableContext.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableContextType } from "./types";
+declare const TableContext: React.Context<TableContextType>;
+export default TableContext;

package/build/components/types/src/components/Table/docsData.d.ts

@@ -0,0 +1,39 @@
+interface CellValue {
+    value: string;
+    rawValue?: number;
+}
+interface TableHeader {
+    key: string;
+    label: string;
+    isSortable?: boolean;
+    sort?: "none" | "ascending" | "descending";
+    cellProps?: {
+        className?: string;
+    };
+}
+interface TableRow {
+    [key: string]: string | number | CellValue | Array<any>;
+}
+export declare const headers: TableHeader[];
+export declare const rows: TableRow[];
+export declare const unsortedHeaders: TableHeader[];
+export declare const ascendingHeaders: TableHeader[];
+export declare const descendingHeaders: TableHeader[];
+export declare const sortableRows: {
+    date: CellValue;
+}[];
+export declare const ascendingRowsByDate: {
+    date: CellValue;
+}[];
+export declare const descendingRowsByDate: {
+    date: CellValue;
+}[];
+export declare const expandableTableRows: TableRow[];
+export declare const footer: TableRow[];
+export declare const scrollableHeaders: TableHeader[];
+export declare const scrollableRows: TableRow[];
+export declare const shrinkHeaders: TableHeader[];
+export declare const shrinkRows: TableRow[];
+export declare const fillHeaders: TableHeader[];
+export declare const fillRows: TableRow[];
+export {};

package/build/components/types/src/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+export { Table } from "./Table";
+export { Footer } from "./Footer";

package/build/components/types/src/components/Table/types.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+export interface CellValue {
+    value: React.ReactNode;
+    rawValue?: number | string;
+    [key: string]: any;
+}
+export interface TableHeader {
+    key: string;
+    label: React.ReactNode;
+    isSortable?: boolean;
+    sort?: "none" | "ascending" | "descending";
+    cellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+    headCellProps?: React.HTMLAttributes<HTMLTableCellElement>;
+}
+export interface TableRow {
+    [key: string]: React.ReactNode | CellValue | TableRow[] | boolean | undefined;
+    expand?: TableRow[];
+    isExpanded?: boolean;
+    id?: string;
+}
+export interface ExpandableRowsCaptions {
+    header: string;
+    emptyRow: string;
+}
+export interface ExpandableRows {
+    hasExpandableRows: boolean;
+    expandableRowsCaptions?: ExpandableRowsCaptions;
+}
+export interface TableContextType {
+    headers: TableHeader[];
+    rows: TableRow[];
+    footers?: TableRow[];
+    expandableRows?: ExpandableRows;
+}

package/build/components/types/{components → src/components}/Tabs/Tabs.d.ts

@@ -1,8 +1,6 @@
 import React from "react";
 export declare const variants: readonly ["standard", "light"];
-export declare const colours: readonly ["default", "inverse"];
 export type TabsVariant = (typeof variants)[number];
-export type TabsColour = (typeof colours)[number];
 export interface TabPanelProps {
     id: string;
     isDisabled?: boolean;
@@ -17,7 +15,7 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
     /** Additional classes for tabs header. */
     classesTabNav?: string;
     /** Color theme for the tabs */
-    colour?: TabsColour;
+    colorScheme?: "dark" | "light";
     /** All tabs have equal width inside a full-width container */
     hasEqualTabWidth?: boolean;
     /** Fullwidth container */

package/build/components/types/src/components/Tag/Tag.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { TagButtonProps } from "./TagButton";
+export declare const colors: readonly ["black", "orange", "yellow", "green", "blue", "success", "info", "warning", "danger"];
+export type TagColor = (typeof colors)[number];
+export type TagSize = "small" | "large";
+interface CommonProps {
+    color?: TagColor;
+    size?: TagSize;
+    isInverse?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    actionButton?: React.ReactElement<TagButtonProps>;
+}
+type SpanProps = CommonProps & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof CommonProps> & {
+    onClick?: undefined;
+};
+type ButtonProps = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+};
+type TagProps = SpanProps | ButtonProps;
+export declare const CLASS_ROOT = "tag";
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
+export { Tag };

package/build/components/types/src/components/Tag/TagButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type TagButtonProps = {
+    className?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    iconName: string;
+    size?: string;
+};
+declare const TagButton: React.ForwardRefExoticComponent<TagButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { TagButton };

package/build/components/types/src/components/Tag/index.d.ts

@@ -0,0 +1,4 @@
+import "./styles/style.scss";
+export { Tag } from "./Tag";
+export { TagButton } from "./TagButton";
+export type { TagColor, TagSize } from "./Tag";

package/build/components/types/src/components/Testimonial/Testimonial.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TestimonialProps {
+    className?: string;
+    children?: React.ReactNode;
+    color?: 'default' | 'orange';
+    isDiv?: boolean;
+    [key: string]: any;
+}
+export declare const Testimonial: React.FC<TestimonialProps>;
+export {};