@twreporter/react-components 9.4.4 → 9.5.0-rc.0

package/lib/button/stories/pillButton.stories.d.ts

@@ -0,0 +1,92 @@
+declare namespace _default {
+    export let title: string;
+    export { PillButton as component };
+    export namespace argTypes {
+        export { THEME_STORYBOOK_ARG_TYPE as theme };
+        export let type: {
+            defaultValue: any;
+            options: any[];
+            control: {
+                type: string;
+            };
+        };
+        export { SIZE_STORYBOOK_ARG_TYPE as size };
+        export let style: {
+            defaultValue: any;
+            options: any[];
+            control: {
+                type: string;
+            };
+        };
+        export namespace showLeft {
+            let defaultValue: boolean;
+            namespace control {
+                let type_1: string;
+                export { type_1 as type };
+            }
+        }
+        export namespace showRight {
+            let defaultValue_1: boolean;
+            export { defaultValue_1 as defaultValue };
+            export namespace control_1 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export namespace pillButton {
+    namespace args {
+        export let text: string;
+        export let size: "S";
+        export let theme: "normal";
+        let style_1: "brand";
+        export { style_1 as style };
+        let type_3: "primary";
+        export { type_3 as type };
+        export let disabled: boolean;
+        export let loading: boolean;
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
+export namespace toggleIconDisplay {
+    export function render(args: any): JSX.Element;
+    export namespace args_1 {
+        let showLeft_1: boolean;
+        export { showLeft_1 as showLeft };
+        let showRight_1: boolean;
+        export { showRight_1 as showRight };
+        let text_1: string;
+        export { text_1 as text };
+        let size_1: "S";
+        export { size_1 as size };
+        let theme_1: "normal";
+        export { theme_1 as theme };
+        let style_2: "brand";
+        export { style_2 as style };
+        let type_4: "primary";
+        export { type_4 as type };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let loading_1: boolean;
+        export { loading_1 as loading };
+    }
+    export { args_1 as args };
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+}
+import PillButton from '../components/pillButton';
+import { THEME_STORYBOOK_ARG_TYPE } from '../../storybook/constants';
+import { SIZE_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/button/stories/textButton.stories.d.ts

@@ -0,0 +1,85 @@
+declare namespace _default {
+    export let title: string;
+    export { TextButton as component };
+    export namespace argTypes {
+        export { THEME_STORYBOOK_ARG_TYPE as theme };
+        export let style: {
+            defaultValue: any;
+            options: any[];
+            control: {
+                type: string;
+            };
+        };
+        export { SIZE_STORYBOOK_ARG_TYPE as size };
+        export namespace showLeft {
+            let defaultValue: boolean;
+            namespace control {
+                let type: string;
+            }
+        }
+        export namespace showRight {
+            let defaultValue_1: boolean;
+            export { defaultValue_1 as defaultValue };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+    }
+}
+export default _default;
+export namespace textButton {
+    namespace args {
+        export let text: string;
+        export let size: "S";
+        export let theme: "normal";
+        let style_1: "dark";
+        export { style_1 as style };
+        export let active: boolean;
+        export let disabled: boolean;
+        export let loading: boolean;
+        export let leftIconComponent: JSX.Element;
+        export let rightIconComponent: JSX.Element;
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
+export namespace toggleIconDisplay {
+    export function render(args: any): JSX.Element;
+    export namespace args_1 {
+        let showLeft_1: boolean;
+        export { showLeft_1 as showLeft };
+        let showRight_1: boolean;
+        export { showRight_1 as showRight };
+        let text_1: string;
+        export { text_1 as text };
+        let size_1: "S";
+        export { size_1 as size };
+        let theme_1: "normal";
+        export { theme_1 as theme };
+        let style_2: "dark";
+        export { style_2 as style };
+        let active_1: boolean;
+        export { active_1 as active };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let loading_1: boolean;
+        export { loading_1 as loading };
+    }
+    export { args_1 as args };
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+}
+import TextButton from '../components/textButton';
+import { THEME_STORYBOOK_ARG_TYPE } from '../../storybook/constants';
+import { SIZE_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/button/stories/toggleButton.stories.d.ts

@@ -0,0 +1,22 @@
+declare namespace _default {
+    export let title: string;
+    export { ToggleButton as component };
+    export namespace argTypes {
+        namespace value {
+            let defaultValue: boolean;
+            let options: boolean[];
+        }
+    }
+}
+export default _default;
+export namespace toggleButton {
+    namespace args {
+        let value_1: boolean;
+        export { value_1 as value };
+        export let labelOn: string;
+        export let labelOff: string;
+        export let disabled: boolean;
+        export function onChange(): void;
+    }
+}
+import ToggleButton from '../components/toggleButton';

package/lib/button/utils/size.d.ts

@@ -0,0 +1,8 @@
+export function getSizeStyle(size: any): {
+    iconSize: string;
+    padding: string;
+};
+declare namespace _default {
+    export { getSizeStyle };
+}
+export default _default;

package/lib/button/utils/theme.d.ts

@@ -0,0 +1,218 @@
+export function getFilledPillButtonTheme(theme: any, disabled: any, style: any): {
+    color: "#ffffff";
+    bgColor: "#bbbbbb";
+    hoverColor: "#ffffff";
+    hoverBgColor: "#bbbbbb";
+} | {
+    color: "#666666";
+    bgColor: "#9c9c9c";
+    hoverColor: "#666666";
+    hoverBgColor: "#9c9c9c";
+} | {
+    color: "#052142";
+    bgColor: "#ffffff";
+    hoverColor: "#052142";
+    hoverBgColor: "#e2e2e2";
+} | {
+    color: "#052142";
+    bgColor: "#cdcdcd";
+    hoverColor: "#052142";
+    hoverBgColor: "#bbbbbb";
+} | {
+    color: "#052142";
+    bgColor: "#f0d5be";
+    hoverColor: "#052142";
+    hoverBgColor: "#e3be98";
+} | {
+    color: "#404040";
+    bgColor: "#cdcdcd";
+    hoverColor: "#404040";
+    hoverBgColor: "#bbbbbb";
+} | {
+    color: "#ffffff";
+    bgColor: "#404040";
+    hoverColor: "#ffffff";
+    hoverBgColor: "#000000";
+} | {
+    color: "#404040";
+    bgColor: "#ffffff";
+    hoverColor: "#404040";
+    hoverBgColor: "#e2e2e2";
+} | {
+    color: "#ffffff";
+    bgColor: "#c40d23";
+    hoverColor: "#ffffff";
+    hoverBgColor: "#9b051e";
+};
+export function getOutlinePillButtonTheme(theme: any, disabled: any, style: any): {
+    color: "#bbbbbb";
+    bgColor: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+    hoverBgColor: "#bbbbbb";
+} | {
+    color: "#9c9c9c";
+    bgColor: "#9c9c9c";
+    hoverColor: "#9c9c9c";
+    hoverBgColor: "#9c9c9c";
+} | {
+    color: "#ffffff";
+    bgColor: "#ffffff";
+    hoverColor: "#e2e2e2";
+    hoverBgColor: "#e2e2e2";
+} | {
+    color: "#cdcdcd";
+    bgColor: "#cdcdcd";
+    hoverColor: "#bbbbbb";
+    hoverBgColor: "#bbbbbb";
+} | {
+    color: "#f0d5be";
+    bgColor: "#f0d5be";
+    hoverColor: "#e3be98";
+    hoverBgColor: "#e3be98";
+} | {
+    color: "#404040";
+    bgColor: "#404040";
+    hoverColor: "#000000";
+    hoverBgColor: "#000000";
+} | {
+    color: "#404040";
+    bgColor: "#ffffff";
+    hoverColor: "#404040";
+    hoverBgColor: "#e2e2e2";
+} | {
+    color: "#c40d23";
+    bgColor: "#c40d23";
+    hoverColor: "#9b051e";
+    hoverBgColor: "#9b051e";
+};
+export function getPrimaryIconButtonTheme(theme: any, isActive: any, isDisabled: any): {
+    color: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+} | {
+    color: "#ffffff";
+    hoverColor: "#e3be98";
+} | {
+    color: "#e3be98";
+    hoverColor: "#e3be98";
+} | {
+    color: "#ffffff";
+    hoverColor: "#e2e2e2";
+} | {
+    color: "#ffffff";
+    hoverColor: "#ffffff";
+} | {
+    color: "#c40d23";
+    hoverColor: "#c40d23";
+} | {
+    color: "#808080";
+    hoverColor: "#404040";
+};
+export function getSecondaryIconButtonTheme(theme: any, isActive: any, isDisabled: any): {
+    color: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+} | {
+    color: "#bbbbbb";
+    hoverColor: "#e3be98";
+} | {
+    color: "#e3be98";
+    hoverColor: "#e3be98";
+} | {
+    color: "#808080";
+    hoverColor: "#ffffff";
+} | {
+    color: "#808080";
+    hoverColor: "#808080";
+} | {
+    color: "#c40d23";
+    hoverColor: "#c40d23";
+} | {
+    color: "#bbbbbb";
+    hoverColor: "#808080";
+};
+export function getIconWithTextButtonTheme(theme: any, isActive: any, isDisabled: any): {
+    color: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+} | {
+    color: "#e2e2e2";
+    hoverColor: "#e3be98";
+} | {
+    color: "#e3be98";
+    hoverColor: "#e3be98";
+} | {
+    color: "#f1f1f1";
+    hoverColor: "#e2e2e2";
+} | {
+    color: "#ffffff";
+    hoverColor: "#ffffff";
+} | {
+    color: "#c40d23";
+    hoverColor: "#c40d23";
+} | {
+    color: "#808080";
+    hoverColor: "#c40d23";
+};
+export function getTextButtonTheme(theme: any, style: any): {
+    color: "#ffffff";
+    hoverColor: "#e3be98";
+} | {
+    color: "#cdcdcd";
+    hoverColor: "#bbbbbb";
+} | {
+    color: "#f0d5be";
+    hoverColor: "#e3be98";
+} | {
+    color: "#404040";
+    hoverColor: "#000000";
+} | {
+    color: "#ffffff";
+    hoverColor: "#e2e2e2";
+} | {
+    color: "#404040";
+    hoverColor: "#c40d23";
+} | {
+    color: "#808080";
+    hoverColor: "#404040";
+} | {
+    color: "#c40d23";
+    hoverColor: "#9b051e";
+};
+export function getDisabledTextButtonTheme(theme: any): {
+    color: "#9c9c9c";
+    hoverColor: "#9c9c9c";
+} | {
+    color: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+};
+export function getActiveTextButtonTheme(theme: any, style: any): {
+    color: "#bbbbbb";
+    hoverColor: "#bbbbbb";
+} | {
+    color: "#e3be98";
+    hoverColor: "#e3be98";
+} | {
+    color: "#000000";
+    hoverColor: "#000000";
+} | {
+    color: "#e2e2e2";
+    hoverColor: "#e2e2e2";
+} | {
+    color: "#c40d23";
+    hoverColor: "#c40d23";
+} | {
+    color: "#404040";
+    hoverColor: "#404040";
+} | {
+    color: "#9b051e";
+    hoverColor: "#9b051e";
+};
+declare namespace _default {
+    export { getFilledPillButtonTheme };
+    export { getOutlinePillButtonTheme };
+    export { getPrimaryIconButtonTheme };
+    export { getSecondaryIconButtonTheme };
+    export { getIconWithTextButtonTheme };
+    export { getTextButtonTheme };
+    export { getDisabledTextButtonTheme };
+    export { getActiveTextButtonTheme };
+}
+export default _default;

package/lib/card/components/article-card.d.ts

@@ -0,0 +1,34 @@
+export default ArticleCard;
+declare function ArticleCard({ title, description, date, image, category, size, isBookmarked, toggleBookmark, releaseBranch, showIsBookmarked, style, slug, }: {
+    title?: string;
+    description?: string;
+    date?: string;
+    image?: {};
+    category?: string;
+    size?: "S";
+    isBookmarked?: boolean;
+    toggleBookmark: any;
+    releaseBranch?: string;
+    showIsBookmarked?: boolean;
+    style?: string;
+    slug?: string;
+}): JSX.Element;
+declare namespace ArticleCard {
+    export namespace propTypes {
+        export let title: any;
+        export let description: any;
+        export let date: any;
+        export let image: any;
+        export let category: any;
+        export let size: any;
+        export let isBookmarked: any;
+        export let toggleBookmark: any;
+        export { BRANCH_PROP_TYPES as releaseBranch };
+        export let showIsBookmarked: any;
+        export let style: any;
+        export let slug: any;
+    }
+    export { Size };
+}
+import { BRANCH_PROP_TYPES } from '@twreporter/core/lib/constants/release-branch';
+import { Size } from '../../shared-enum';

package/lib/card/components/dialog.d.ts

@@ -0,0 +1,14 @@
+export default Dialog;
+declare function Dialog({ text, size, ...props }: {
+    [x: string]: any;
+    text?: string;
+    size?: "S";
+}): JSX.Element;
+declare namespace Dialog {
+    export namespace propTypes {
+        let text: any;
+        let size: any;
+    }
+    export { Size };
+}
+import { Size } from '../../shared-enum';

package/lib/card/components/short-story.d.ts

@@ -0,0 +1,26 @@
+export default ShortStory;
+declare function ShortStory({ title, date, image, category, size, releaseBranch, style, slug, }: {
+    title?: string;
+    date?: string;
+    image?: {};
+    category?: string;
+    size?: "S";
+    releaseBranch?: string;
+    style?: string;
+    slug?: string;
+}): JSX.Element;
+declare namespace ShortStory {
+    export namespace propTypes {
+        export let title: any;
+        export let date: any;
+        export let image: any;
+        export let category: any;
+        export let size: any;
+        export { BRANCH_PROP_TYPES as releaseBranch };
+        export let style: any;
+        export let slug: any;
+    }
+    export { Size };
+}
+import { BRANCH_PROP_TYPES } from '@twreporter/core/lib/constants/release-branch';
+import { Size } from '../../shared-enum';

package/lib/card/index.d.ts

@@ -0,0 +1,10 @@
+declare namespace _default {
+    export { Dialog };
+    export { ArticleCard };
+    export { ShortStory };
+}
+export default _default;
+import Dialog from './components/dialog';
+import ArticleCard from './components/article-card';
+import ShortStory from './components/short-story';
+export { Dialog, ArticleCard, ShortStory };

package/lib/card/stories/articleCard.stories.d.ts

@@ -0,0 +1,30 @@
+declare namespace _default {
+    export let title: string;
+    export { ArticleCard as component };
+    export namespace argTypes {
+        export { BRANCH_STORYBOOK_ARG_TYPE as releaseBranch };
+        export { SIZE_STORYBOOK_ARG_TYPE as size };
+    }
+}
+export default _default;
+export namespace article {
+    function render(args: any): JSX.Element;
+    namespace args {
+        export let size: "L";
+        let title_1: string;
+        export { title_1 as title };
+        export let description: string;
+        export let category: string;
+        export let date: string;
+        export namespace image {
+            let src: string;
+            let alt: string;
+        }
+        export let releaseBranch: string;
+        export let isBookmarked: boolean;
+        export let showIsBookmarked: boolean;
+    }
+}
+import ArticleCard from '../components/article-card';
+import { BRANCH_STORYBOOK_ARG_TYPE } from '../../storybook/constants';
+import { SIZE_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/card/stories/dialog.stories.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    export let title: string;
+    export { Dialog as component };
+    export namespace argTypes {
+        export { SIZE_STORYBOOK_ARG_TYPE as size };
+    }
+}
+export default _default;
+export namespace dialog {
+    function render(args: any): JSX.Element;
+    namespace args {
+        let text: string;
+        let size: "S";
+    }
+    namespace parameters {
+        namespace backgrounds {
+            let _default: string;
+            export { _default as default };
+        }
+    }
+}
+import Dialog from '../components/dialog';
+import { SIZE_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/card/stories/shortStory.stories.d.ts

@@ -0,0 +1,37 @@
+declare namespace _default {
+    export let title: string;
+    export { ShortStory as component };
+    export namespace argTypes {
+        export { BRANCH_STORYBOOK_ARG_TYPE as releaseBranch };
+        export { SIZE_STORYBOOK_ARG_TYPE as size };
+        export let style: {
+            defaultValue: any;
+            options: any[];
+            control: {
+                type: string;
+            };
+        };
+    }
+}
+export default _default;
+export namespace shortStory {
+    function render(args: any): JSX.Element;
+    namespace args {
+        export let size: "L";
+        let title_1: string;
+        export { title_1 as title };
+        export let category: string;
+        export let date: string;
+        export namespace image {
+            let src: string;
+            let alt: string;
+        }
+        export let releaseBranch: string;
+        let style_1: string;
+        export { style_1 as style };
+        export let slug: string;
+    }
+}
+import ShortStory from '../components/short-story';
+import { BRANCH_STORYBOOK_ARG_TYPE } from '../../storybook/constants';
+import { SIZE_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,21 @@
+declare namespace _default {
+    export let title: string;
+    export { Checkbox as component };
+    export namespace argTypes {
+        namespace value {
+            let defaultValue: boolean;
+            let options: boolean[];
+        }
+    }
+}
+export default _default;
+export namespace checkbox {
+    namespace args {
+        export let label: string;
+        let value_1: boolean;
+        export { value_1 as value };
+        export let disabled: boolean;
+        export function onChange(e: any): void;
+    }
+}
+import Checkbox from '.';

package/lib/checkbox/index.d.ts

@@ -0,0 +1,16 @@
+export function Checkbox({ value, label, disabled, onChange, ...props }: {
+    [x: string]: any;
+    value?: boolean;
+    label?: string;
+    disabled?: boolean;
+    onChange?: () => void;
+}): JSX.Element;
+export namespace Checkbox {
+    namespace propTypes {
+        let value: any;
+        let label: any;
+        let disabled: any;
+        let onChange: any;
+    }
+}
+export default Checkbox;