@pushwoosh/dumb-components 3.2.0 → 3.3.0

package/GetStartedPage/GetStartedPage.d.ts

@@ -2,7 +2,7 @@ import { type ReactElement } from 'react';
 import type { GetStartedPageProps } from './types';
 /**
  * Onboarding/empty-state page with a title, description, illustration, optional
- * checklist, help banner and action controls.
+ * checklist (check icons or numbered steps), help banner and action controls.
  *
  * @example
  * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />

package/GetStartedPage/GetStartedPage.js

@@ -4,10 +4,10 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { CheckRoundIcon, LockIcon } from '@pushwoosh/kit-icons';
 import { H1, Paragraph } from '@pushwoosh/kit-typography';
 import { Banner } from '../Banner';
-import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, Image } from './styles';
+import { GradientBackground, Wrapper, ContentBox, UnorderedList, UnorderedListItem, UnorderedListIcon, UnorderedListText, OrderedList, OrderedListItem, StepMarker, StepIndex, StepSeparator, Image } from './styles';
 /**
  * Onboarding/empty-state page with a title, description, illustration, optional
- * checklist, help banner and action controls.
+ * checklist (check icons or numbered steps), help banner and action controls.
  *
  * @example
  * <GetStartedPage title="Welcome" description="Set up your first app" image={img} actions={<Button color="primary">Start</Button>} />
@@ -19,6 +19,7 @@ export function GetStartedPage(props) {
     image,
     helpText,
     checkList = [],
+    checkListView = 'check',
     actions = null
   } = props;
   return _jsx(GradientBackground, {
@@ -33,7 +34,17 @@ export function GetStartedPage(props) {
             }), _jsx(Paragraph, {
               children: description
             })]
-          }), !!checkList.length && _jsx(UnorderedList, {
+          }), !!checkList.length && (checkListView === 'numbered' ? _jsx(OrderedList, {
+            children: checkList.map((text, index) => _jsxs(OrderedListItem, {
+              children: [_jsxs(StepMarker, {
+                children: [_jsx(StepIndex, {
+                  children: index + 1
+                }), index < checkList.length - 1 && _jsx(StepSeparator, {})]
+              }), _jsx(Paragraph, {
+                children: text
+              })]
+            }, `step-${text}`))
+          }) : _jsx(UnorderedList, {
             children: checkList.map(text => _jsxs(UnorderedListItem, {
               children: [_jsx(UnorderedListIcon, {
                 children: _jsx(CheckRoundIcon, {
@@ -46,7 +57,7 @@ export function GetStartedPage(props) {
                 children: text
               })]
             }, `item-${text}`))
-          })]
+          }))]
         }), (helpText || actions) && _jsxs(Vertical, {
           "$gap": 16,
           children: [helpText && _jsx(Banner, {

package/GetStartedPage/index.d.ts

@@ -1,2 +1,2 @@
 export { GetStartedPage } from './GetStartedPage';
-export type { GetStartedPageProps } from './types';
+export type { GetStartedPageCheckListView, GetStartedPageProps } from './types';

package/GetStartedPage/styles.d.ts

@@ -10,6 +10,21 @@ export declare const ContentBox: import("styled-components/dist/types").IStyledC
 export declare const UnorderedList: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const OrderedList: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const OrderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepMarker: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepIndex: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StepSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const UnorderedListItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/GetStartedPage/styles.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, UnitSize } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, UnitSize } from '@pushwoosh/kit-constants';
 import { Text } from '@pushwoosh/kit-typography';
 export const GradientBackground = styled.div.withConfig({
   displayName: "GradientBackground",
@@ -17,19 +17,39 @@ export const UnorderedList = styled.ul.withConfig({
   displayName: "UnorderedList",
   componentId: "sc-6jf7u0-3"
 })(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:8px;"]);
+export const OrderedList = styled.ol.withConfig({
+  displayName: "OrderedList",
+  componentId: "sc-6jf7u0-4"
+})(["display:flex;flex-direction:column;padding:0;margin:0;list-style:none;gap:4px;"]);
+export const OrderedListItem = styled.li.withConfig({
+  displayName: "OrderedListItem",
+  componentId: "sc-6jf7u0-5"
+})(["display:grid;grid-template-columns:auto 1fr;column-gap:8px;"]);
+export const StepMarker = styled.div.withConfig({
+  displayName: "StepMarker",
+  componentId: "sc-6jf7u0-6"
+})(["display:flex;flex-direction:column;align-items:center;gap:4px;"]);
+export const StepIndex = styled.div.withConfig({
+  displayName: "StepIndex",
+  componentId: "sc-6jf7u0-7"
+})(["display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid ", ";border-radius:50%;background-color:", ";font-size:", ";font-weight:", ";"], Color.DIVIDER, Color.FROZEN, FontSize.SMALL, FontWeight.BOLD);
+export const StepSeparator = styled.div.withConfig({
+  displayName: "StepSeparator",
+  componentId: "sc-6jf7u0-8"
+})(["height:8px;border-left:1px solid ", ";"], Color.DIVIDER);
 export const UnorderedListItem = styled.li.withConfig({
   displayName: "UnorderedListItem",
-  componentId: "sc-6jf7u0-4"
+  componentId: "sc-6jf7u0-9"
 })(["display:flex;gap:8px;"]);
 export const UnorderedListText = styled(Text).withConfig({
   displayName: "UnorderedListText",
-  componentId: "sc-6jf7u0-5"
+  componentId: "sc-6jf7u0-10"
 })(["padding:4px 0;"]);
 export const UnorderedListIcon = styled.div.withConfig({
   displayName: "UnorderedListIcon",
-  componentId: "sc-6jf7u0-6"
+  componentId: "sc-6jf7u0-11"
 })(["display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:", ";border-radius:50%;padding:4px;"], Color.SUCCESS_LIGHT);
 export const Image = styled.img.withConfig({
   displayName: "Image",
-  componentId: "sc-6jf7u0-7"
+  componentId: "sc-6jf7u0-12"
 })(["width:400px;height:400px;object-fit:contain;"]);

package/GetStartedPage/types.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+/** Marker of {@link GetStartedPage} checklist items. */
+export type GetStartedPageCheckListView = 'check' | 'numbered';
 /** Props of {@link GetStartedPage}. */
 export interface GetStartedPageProps {
     /** Page title. */
@@ -9,8 +11,10 @@ export interface GetStartedPageProps {
     image: string;
     /** Optional help banner text. */
     helpText?: string;
-    /** Checklist items rendered with check icons. */
+    /** Checklist items rendered with check icons, or numbered steps when `checkListView` is `numbered`. */
     checkList?: string[];
+    /** Marker of checklist items: check icons (default) or step numbers. */
+    checkListView?: GetStartedPageCheckListView;
     /** Call-to-action controls. */
     actions?: ReactNode;
 }

package/index.d.ts

@@ -9,7 +9,7 @@ export { Divider } from './Divider';
 export { Drawer, DrawerHeader, DrawerTitle, DrawerBody, DrawerDocs, useDocs, } from './Drawer';
 export { CalendarSuperForm, CalendarDropdown, addPeriod, compareStructs, dateToStruct, dateToStructTz, getTimezoneOffset, getPeriodEnd, getPeriodStart, structToDate, structToDateTz, stringifyValue, pickDateStruct, type CalendarDropdownProps, type CalendarDropdownRangeDateProps, type CalendarSuperFormProps, type DateStruct, type RangeValue, } from './Calendar';
 export { DropdownMenu, DropdownMenuButton, DropdownMenuSection, DropdownMenuItem, DropdownMenuSubmenu, } from './DropdownMenu';
-export { GetStartedPage } from './GetStartedPage';
+export { GetStartedPage, type GetStartedPageCheckListView, type GetStartedPageProps } from './GetStartedPage';
 export { EditableField } from './EditableField';
 export { EmojiPicker } from './EmojiPicker';
 export { InputFile } from './InputFile';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",