diff --git a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json index 3ccf6e3e74..d7d54ee44c 100644 --- a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json +++ b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json @@ -80,6 +80,7 @@ }, "iconSize": { "1": "16px", - "2": "24px" + "2": "24px", + "3": "32px" } } diff --git a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/types.ts b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/types.ts index c3313ec455..069035ce3c 100644 --- a/app/client/packages/design-system/widgets/src/components/ActionGroup/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/ActionGroup/src/types.ts @@ -33,7 +33,7 @@ export interface ActionGroupProps >, InheritedActionButtonProps { orientation?: keyof typeof ACTION_GROUP_ORIENTATIONS; - size?: keyof typeof SIZES; + size?: Omit; } export interface ActionGroupItemProps extends ButtonProps { diff --git a/app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.mdx b/app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.mdx index bf2a592628..10a02547fb 100644 --- a/app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.mdx +++ b/app/client/packages/design-system/widgets/src/components/ActionGroup/stories/ActionGroup.stories.mdx @@ -39,14 +39,16 @@ export const Template = (args) => { - {Object.keys(SIZES).map((size) => ( - - Option 1 - Option 2 - Option 3 - Option 4 - - ))} + {Object.keys(SIZES) + .filter((size) => !["large"].includes(size)) + .map((size) => ( + + Option 1 + Option 2 + Option 3 + Option 4 + + ))} diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts index d2fa87735c..918c6217df 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts @@ -41,5 +41,5 @@ export interface ButtonProps extends HeadlessButtonProps { /** Size of the button * @default medium */ - size?: keyof typeof SIZES; + size?: Omit; } diff --git a/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.mdx b/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.mdx index ec6bab3358..713cb588f3 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.mdx +++ b/app/client/packages/design-system/widgets/src/components/Button/stories/Button.stories.mdx @@ -82,11 +82,13 @@ There are 2 sizes of the button component. Default size is `medium`. - {Object.keys(SIZES).map((size) => ( -
-
- ))} + {Object.keys(SIZES) + .filter((size) => !["large"].includes(size)) + .map((size) => ( +
+
+ ))} diff --git a/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts b/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts index 89be1733b5..039d562bfc 100644 --- a/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts +++ b/app/client/packages/design-system/widgets/src/components/Flex/src/flexCss.ts @@ -1,13 +1,15 @@ import { css } from "@emotion/css"; import kebabCase from "lodash/kebabCase"; -import type { FlexCssProps, CssVarValues } from "./types"; +import type { FlexCssProps, CssVarValues, FlexProps } from "./types"; export const flexCss = (props: FlexCssProps) => { + const { isInner, ...rest } = props; + return css` - ${Object.keys(props).reduce( + ${Object.keys(rest).reduce( (styles, key) => - styles + flexStyles(key, props[key as keyof FlexCssProps]), + styles + flexStyles(key, props[key as keyof FlexCssProps], { isInner }), "", )} `; @@ -16,6 +18,7 @@ export const flexCss = (props: FlexCssProps) => { const flexStyles = ( cssProp: string, value: FlexCssProps[keyof FlexCssProps], + extraProps?: Pick, ): string => { if (value == null) return ""; @@ -71,6 +74,7 @@ const flexStyles = ( kebabCase(cssProp), value as CssVarValues, cssVarValue, + extraProps, )}; `; default: @@ -83,7 +87,8 @@ const flexStyles = ( export const containerDimensionStyles = ( cssProp: string, value: T, - callback?: (value: T) => void, + callback?: (value: T, extraProps?: Pick) => void, + extraProps?: Pick, ) => { if (value == null) return; @@ -95,20 +100,22 @@ export const containerDimensionStyles = ( `@container (min-width: ${current}) {& { ${cssProp}: ${ //@ts-expect-error: type mismatch - callback ? callback(value[current]) : value[current] + callback ? callback(value[current], extraProps) : value[current] };}}` ); } else { return ( prev + - //@ts-expect-error: type mismatch - `${cssProp}: ${callback ? callback(value[current]) : value[current]};` + `${cssProp}: ${ + //@ts-expect-error: type mismatch + callback ? callback(value[current], extraProps) : value[current] + };` ); } }, ""); } - return `${cssProp}: ${callback ? callback(value) : value};`; + return `${cssProp}: ${callback ? callback(value, extraProps) : value};`; }; const alignItemsValue = (value: FlexCssProps["alignItems"]) => { @@ -131,17 +138,26 @@ export const flexWrapValue = (value: FlexCssProps["wrap"]) => { return value; }; -const cssVarValue = (value: CssVarValues) => { +const cssVarValue = ( + value: CssVarValues, + extraProps?: Pick, +) => { + const isInner = Boolean(extraProps?.isInner); + if (value == null) return; if ((value as string).includes("sizing")) { return `var(--${value})`; } - if ((value as string).includes("spacing")) { + if ((value as string).includes("spacing") && !isInner) { return `var(--outer-${value})`; } + if ((value as string).includes("spacing") && isInner) { + return `var(--inner-${value})`; + } + return value; }; diff --git a/app/client/packages/design-system/widgets/src/components/Flex/src/types.ts b/app/client/packages/design-system/widgets/src/components/Flex/src/types.ts index d123bd38dc..7983997fb1 100644 --- a/app/client/packages/design-system/widgets/src/components/Flex/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Flex/src/types.ts @@ -209,6 +209,8 @@ export interface FlexProps style?: CSSProperties; /** Sets the HTML [id](https://developer.mozilla.org/en-US/docs/Web/API/Element/id) for the element. */ id?: string; + /** used to specify what kind of spacing the component will use ( inner-spacing or outer-spacing) */ + isInner?: boolean; /* * Events props diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css index 8034ba5a9b..f25cb310a7 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/styles.module.css @@ -6,4 +6,8 @@ &[data-size="medium"] { inline-size: var(--icon-size-2); } + + &[data-size="large"] { + inline-size: var(--icon-size-3); + } } diff --git a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts index ec39682686..da67e1e12f 100644 --- a/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Icon/src/types.ts @@ -7,6 +7,8 @@ import type { SIZES } from "../../../shared"; export type IconProps = Omit & { /** Size of the icon * @default medium + * + * Note: we need large size for the icon only */ size?: keyof typeof SIZES; /** custom icon component diff --git a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts index 18c129743b..7761bfdac1 100644 --- a/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Modal/src/types.ts @@ -3,6 +3,7 @@ import type { PopoverProps, } from "@design-system/headless"; import type { ReactNode } from "react"; +import type { SIZES } from "../../../shared"; export interface ModalProps extends Pick< @@ -13,7 +14,7 @@ export interface ModalProps /** Size of the Modal * @default medium */ - size?: "small" | "medium" | "large"; + size?: keyof typeof SIZES; /** The children of the component. */ children: ReactNode; } diff --git a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx index 7161465b32..48e68dd888 100644 --- a/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx +++ b/app/client/packages/design-system/widgets/src/components/TextInput/src/TextInput.tsx @@ -23,7 +23,7 @@ export interface TextInputProps extends HeadlessTextInputProps { * * @default medium */ - size?: keyof typeof SIZES; + size?: Omit; } const _TextInput = (props: TextInputProps, ref: HeadlessTextInputRef) => { diff --git a/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.mdx b/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.mdx index c9e67decd0..812ce1da84 100644 --- a/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.mdx +++ b/app/client/packages/design-system/widgets/src/components/TextInput/stories/TextInput.stories.mdx @@ -51,14 +51,16 @@ TextInput is a component that allows users to input text. - {Object.keys(SIZES).map((size) => ( - } - key={size} - /> - ))} + {Object.keys(SIZES) + .filter((size) => !["large"].includes(size)) + .map((size) => ( + } + key={size} + /> + ))} diff --git a/app/client/packages/design-system/widgets/src/shared/sizes/index.ts b/app/client/packages/design-system/widgets/src/shared/sizes/index.ts index bd5e8371bb..020e0122ad 100644 --- a/app/client/packages/design-system/widgets/src/shared/sizes/index.ts +++ b/app/client/packages/design-system/widgets/src/shared/sizes/index.ts @@ -1,4 +1,5 @@ export const SIZES = { small: "small", medium: "medium", + large: "large", } as const; diff --git a/app/client/src/widgets/index.ts b/app/client/src/widgets/index.ts index 9321bb45c8..6e3b04a73f 100644 --- a/app/client/src/widgets/index.ts +++ b/app/client/src/widgets/index.ts @@ -78,6 +78,7 @@ import { ZoneWidget } from "./anvil/ZoneWidget"; import { WDSHeadingWidget } from "./wds/WDSHeadingWidget"; import { WDSParagraphWidget } from "./wds/WDSParagraphWidget"; import { WDSModalWidget } from "./wds/WDSModalWidget"; +import { WDSStatBoxWidget } from "./wds/WDSStatBoxWidget"; import { WDSKeyValueWidget } from "./wds/WDSKeyValueWidget"; const LegacyWidgets = [ @@ -168,6 +169,7 @@ const WDSWidgets = [ WDSParagraphWidget, WDSHeadingWidget, WDSModalWidget, + WDSStatBoxWidget, WDSKeyValueWidget, ]; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/component/index.tsx b/app/client/src/widgets/wds/WDSStatBoxWidget/component/index.tsx new file mode 100644 index 0000000000..82ad66e452 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/component/index.tsx @@ -0,0 +1,62 @@ +import React from "react"; +import type { StatBoxComponentProps } from "./types"; + +import styles from "./styles.module.css"; +import { Flex, Icon, Text } from "@design-system/widgets"; + +export const StatBoxComponent = (props: StatBoxComponentProps) => { + const { + iconAlign, + iconName, + label, + sublabel, + value, + valueChange, + valueImpact, + } = props; + + return ( + + {iconName && iconName !== "(none)" && ( + + )} + + {label && ( + + {label} + + )} + {value && ( + + + {value} + + {valueChange && ( + + {valueChange} + + )} + + )} + {sublabel && ( + + {sublabel} + + )} + + + ); +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css b/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css new file mode 100644 index 0000000000..e42098ef1b --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/component/styles.module.css @@ -0,0 +1,6 @@ +.statbox { + border: 1px solid var(--color-bd); + border-radius: var(--border-radius-1); + width: 100%; + background: var(--color-bg-elevation-2); +} diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/component/types.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/component/types.ts new file mode 100644 index 0000000000..b797856812 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/component/types.ts @@ -0,0 +1,3 @@ +import type { StatBoxWidgetProps } from "../widget/types"; + +export interface StatBoxComponentProps extends StatBoxWidgetProps {} diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/anvilConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/anvilConfig.ts new file mode 100644 index 0000000000..79a57b3130 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/anvilConfig.ts @@ -0,0 +1,8 @@ +import type { AnvilConfig } from "WidgetProvider/constants"; + +export const anvilConfig: AnvilConfig = { + isLargeWidget: true, + widgetSize: { + minWidth: "100%", + }, +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/autocompleteConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/autocompleteConfig.ts new file mode 100644 index 0000000000..bd5b9c19a9 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/autocompleteConfig.ts @@ -0,0 +1,7 @@ +import { DefaultAutocompleteDefinitions } from "widgets/WidgetUtils"; + +export const autocompleteConfig = { + "!doc": "Show and highlight stats from your data sources", + "!url": "https://docs.appsmith.com/widget-reference/stat-box", + isVisible: DefaultAutocompleteDefinitions.isVisible, +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/defaultsConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/defaultsConfig.ts new file mode 100644 index 0000000000..c9391910dd --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/defaultsConfig.ts @@ -0,0 +1,16 @@ +import type { WidgetDefaultProps } from "WidgetProvider/constants"; +import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; + +export const defaultsConfig = { + isVisible: true, + widgetName: "StatBoxWidget", + version: 1, + animateLoading: true, + valueImpact: "positive", + valueChange: "+120%", + value: "1500", + label: "Active Users", + sublabel: "Since 21 Jan 2022", + icon: "user", + responsiveBehavior: ResponsiveBehavior.Fill, +} as unknown as WidgetDefaultProps; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts new file mode 100644 index 0000000000..f37645858c --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/index.ts @@ -0,0 +1,6 @@ +export * from "./propertyPaneConfig"; +export { autocompleteConfig } from "./autocompleteConfig"; +export { defaultsConfig } from "./defaultsConfig"; +export { metaConfig } from "./metaConfig"; +export { settersConfig } from "./settersConfig"; +export { anvilConfig } from "./anvilConfig"; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts new file mode 100644 index 0000000000..b89a23fe63 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/metaConfig.ts @@ -0,0 +1,11 @@ +import IconSVG from "../icon.svg"; +import { WIDGET_TAGS } from "constants/WidgetConstants"; + +export const metaConfig = { + name: "Statbox", + iconSVG: IconSVG, + needsMeta: false, + isCanvas: false, + searchTags: ["statbox"], + tags: [WIDGET_TAGS.DISPLAY], +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/contentConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/contentConfig.ts new file mode 100644 index 0000000000..6e4b9af21e --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/contentConfig.ts @@ -0,0 +1,141 @@ +import { COLORS } from "@design-system/widgets"; +import { ValidationTypes } from "constants/WidgetValidation"; +import capitalize from "lodash/capitalize"; + +export const propertyPaneContentConfig = [ + { + sectionName: "Fields", + children: [ + { + propertyName: "label", + label: "Label", + helpText: "Sets the label of the statbox", + controlType: "INPUT_TEXT", + placeholderText: "Active users", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + { + propertyName: "value", + label: "Value", + helpText: "Sets the value of the statbox", + controlType: "INPUT_TEXT", + placeholderText: "257", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + ], + }, + { + sectionName: "Optional Fields", + children: [ + { + propertyName: "iconName", + label: "Select icon", + helpText: "Sets the icon to be used for the statbox", + controlType: "ICON_SELECT_V2", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + }, + }, + { + propertyName: "iconAlign", + label: "Position", + helpText: "Sets the icon alignment", + controlType: "ICON_TABS", + defaultValue: "start", + fullWidth: false, + options: [ + { + startIcon: "skip-left-line", + value: "start", + }, + { + startIcon: "skip-right-line", + value: "end", + }, + ], + isBindProperty: false, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: ["start", "end"], + }, + }, + }, + { + propertyName: "valueChange", + label: "Value change", + helpText: "Secondary information about the value", + controlType: "INPUT_TEXT", + placeholderText: "+146%", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + { + propertyName: "valueImpact", + label: "Impact", + controlType: "DROP_DOWN", + fullWidth: true, + helpText: "Emphasizes the change's semantic impact", + options: Object.values(COLORS).map((semantic) => ({ + label: capitalize(semantic), + value: semantic, + })), + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { + type: ValidationTypes.TEXT, + params: { + allowedValues: Object.values(COLORS), + default: COLORS.accent, + }, + }, + }, + { + propertyName: "sublabel", + label: "Sub label", + helpText: "Sets the sublabel of the statbox", + controlType: "INPUT_TEXT", + placeholderText: "Since 21 Jan 2022", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, + ], + }, + { + sectionName: "General", + children: [ + { + propertyName: "isVisible", + label: "Visible", + helpText: "Controls the visibility of the widget", + controlType: "SWITCH", + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + { + propertyName: "animateLoading", + label: "Animate loading", + controlType: "SWITCH", + helpText: "Controls the loading of the widget", + defaultValue: true, + isJSConvertible: true, + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.BOOLEAN }, + }, + ], + }, +]; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/index.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/index.ts new file mode 100644 index 0000000000..4273f74125 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/index.ts @@ -0,0 +1,2 @@ +export { propertyPaneContentConfig } from "./contentConfig"; +export { propertyPaneStyleConfig } from "./styleConfig"; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/styleConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/styleConfig.ts new file mode 100644 index 0000000000..a7666dd337 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/propertyPaneConfig/styleConfig.ts @@ -0,0 +1 @@ +export const propertyPaneStyleConfig = []; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/config/settersConfig.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/config/settersConfig.ts new file mode 100644 index 0000000000..73c21f4dd8 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/config/settersConfig.ts @@ -0,0 +1,8 @@ +export const settersConfig = { + __setters: { + setVisibility: { + path: "isVisible", + type: "boolean", + }, + }, +}; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg b/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg new file mode 100644 index 0000000000..59ea1a42e9 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/index.tsx b/app/client/src/widgets/wds/WDSStatBoxWidget/index.tsx new file mode 100644 index 0000000000..aed7a48a5d --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/index.tsx @@ -0,0 +1,3 @@ +import { WDSStatBoxWidget } from "./widget"; + +export { WDSStatBoxWidget }; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx new file mode 100644 index 0000000000..0f805ae803 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/index.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import type { SetterConfig } from "entities/AppTheming"; +import type { WidgetState } from "widgets/BaseWidget"; +import BaseWidget from "widgets/BaseWidget"; + +import { + metaConfig, + defaultsConfig, + autocompleteConfig, + propertyPaneContentConfig, + propertyPaneStyleConfig, + settersConfig, + anvilConfig, +} from "./../config"; +import { StatBoxComponent } from "../component"; +import type { StatBoxWidgetProps } from "./types"; +import type { AnvilConfig } from "WidgetProvider/constants"; + +class WDSStatBoxWidget extends BaseWidget { + constructor(props: StatBoxWidgetProps) { + super(props); + } + + static type = "WDS_STATBOX_WIDGET"; + + static getConfig() { + return metaConfig; + } + + static getDefaults() { + return defaultsConfig; + } + + static getAutocompleteDefinitions() { + return autocompleteConfig; + } + + static getPropertyPaneContentConfig() { + return propertyPaneContentConfig; + } + + static getPropertyPaneStyleConfig() { + return propertyPaneStyleConfig; + } + + static getSetterConfig(): SetterConfig { + return settersConfig; + } + + static getAnvilConfig(): AnvilConfig | null { + return anvilConfig; + } + + getWidgetView() { + return ; + } +} + +export { WDSStatBoxWidget }; diff --git a/app/client/src/widgets/wds/WDSStatBoxWidget/widget/types.ts b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/types.ts new file mode 100644 index 0000000000..cc1101fbc3 --- /dev/null +++ b/app/client/src/widgets/wds/WDSStatBoxWidget/widget/types.ts @@ -0,0 +1,12 @@ +import type { WidgetProps } from "widgets/BaseWidget"; +import type { COLORS, IconProps } from "@design-system/widgets"; + +export interface StatBoxWidgetProps extends WidgetProps { + label?: string; + value?: string; + iconName?: IconProps["name"] | "(none)"; + iconAlign?: "start" | "end"; + valueChange?: string; + valueImpact?: keyof typeof COLORS; + sublabel?: string; +} diff --git a/app/client/src/widgets/wds/constants.ts b/app/client/src/widgets/wds/constants.ts index 884774d1ea..ad7f202a52 100644 --- a/app/client/src/widgets/wds/constants.ts +++ b/app/client/src/widgets/wds/constants.ts @@ -18,6 +18,7 @@ export const WDS_V2_WIDGET_MAP = { RADIO_GROUP_WIDGET: "WDS_RADIO_GROUP_WIDGET", MENU_BUTTON_WIDGET: "WDS_MENU_BUTTON_WIDGET", MODAL_WIDGET: "WDS_MODAL_WIDGET", + STATBOX_WIDGET: "WDS_STATBOX_WIDGET", KEY_VALUE_WIDGET: "WDS_KEY_VALUE_WIDGET", // Anvil layout widgets