@nimbus-ds/patterns 1.34.1 → 1.36.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/dist/AppShell/index.d.ts +0 -109
- package/dist/AppShell/index.js +0 -2
- package/dist/CHANGELOG.md +0 -538
- package/dist/Calendar/index.d.ts +0 -44
- package/dist/Calendar/index.js +0 -2
- package/dist/CalloutCard/index.d.ts +0 -43
- package/dist/CalloutCard/index.js +0 -2
- package/dist/ChatInput/index.d.ts +0 -89
- package/dist/ChatInput/index.js +0 -2
- package/dist/DataList/index.d.ts +0 -49
- package/dist/DataList/index.js +0 -2
- package/dist/DataTable/index.d.ts +0 -201
- package/dist/DataTable/index.js +0 -2
- package/dist/Editor/index.d.ts +0 -65
- package/dist/Editor/index.js +0 -2
- package/dist/EmptyApp/index.d.ts +0 -65
- package/dist/EmptyApp/index.js +0 -2
- package/dist/EmptyMessage/index.d.ts +0 -38
- package/dist/EmptyMessage/index.js +0 -2
- package/dist/FormField/index.d.ts +0 -63
- package/dist/FormField/index.js +0 -2
- package/dist/HelpLink/index.d.ts +0 -20
- package/dist/HelpLink/index.js +0 -2
- package/dist/InitialScreen/index.d.ts +0 -138
- package/dist/InitialScreen/index.js +0 -2
- package/dist/InteractiveList/index.d.ts +0 -133
- package/dist/InteractiveList/index.js +0 -2
- package/dist/Layout/index.d.ts +0 -33
- package/dist/Layout/index.js +0 -2
- package/dist/Menu/index.d.ts +0 -151
- package/dist/Menu/index.js +0 -2
- package/dist/MenuButton/index.d.ts +0 -101
- package/dist/MenuButton/index.js +0 -2
- package/dist/NavTabs/index.d.ts +0 -46
- package/dist/NavTabs/index.js +0 -2
- package/dist/Page/index.d.ts +0 -48
- package/dist/Page/index.js +0 -2
- package/dist/PlanDisplay/index.d.ts +0 -72
- package/dist/PlanDisplay/index.js +0 -2
- package/dist/ProductDataList/index.d.ts +0 -208
- package/dist/ProductDataList/index.js +0 -2
- package/dist/ProductUpdates/index.d.ts +0 -79
- package/dist/ProductUpdates/index.js +0 -2
- package/dist/README.md +0 -235
- package/dist/SideModal/index.d.ts +0 -73
- package/dist/SideModal/index.js +0 -2
- package/dist/Sortable/index.d.ts +0 -140
- package/dist/Sortable/index.js +0 -2
- package/dist/SummaryStats/index.d.ts +0 -238
- package/dist/SummaryStats/index.js +0 -2
- package/dist/ThumbnailWithAction/index.d.ts +0 -31
- package/dist/ThumbnailWithAction/index.js +0 -2
- package/dist/components-props.json +0 -1
- package/dist/index.d.ts +0 -1672
- package/dist/index.js +0 -2
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
// Generated by dts-bundle-generator v8.1.2
|
|
2
|
-
|
|
3
|
-
import { DndContextProps, DragEndEvent, DragOverEvent, DragOverlayProps, DragStartEvent, PointerSensorOptions, UniqueIdentifier } from '@dnd-kit/core';
|
|
4
|
-
import { BoxProps } from '@nimbus-ds/components';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { PropsWithChildren, ReactNode } from 'react';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Properties specific to the ProductDataListItem component
|
|
10
|
-
*/
|
|
11
|
-
export interface ProductDataListItemProperties {
|
|
12
|
-
/**
|
|
13
|
-
* The id of the product
|
|
14
|
-
*/
|
|
15
|
-
id: string;
|
|
16
|
-
/**
|
|
17
|
-
* The title of the product
|
|
18
|
-
*/
|
|
19
|
-
title: string;
|
|
20
|
-
/**
|
|
21
|
-
* The image URL of the product
|
|
22
|
-
*/
|
|
23
|
-
imageUrl?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Alternative text for the product image
|
|
26
|
-
*/
|
|
27
|
-
imageAlt?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Whether the item is draggable
|
|
30
|
-
*/
|
|
31
|
-
isDraggable?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Callback fired when remove button is clicked
|
|
34
|
-
*/
|
|
35
|
-
onRemove?: () => void;
|
|
36
|
-
/**
|
|
37
|
-
* Whether the item has a divider
|
|
38
|
-
*/
|
|
39
|
-
withDivider?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Additional content to be rendered
|
|
42
|
-
*/
|
|
43
|
-
children?: ReactNode;
|
|
44
|
-
/**
|
|
45
|
-
* Icon component for the tag
|
|
46
|
-
*/
|
|
47
|
-
tagIcon?: ReactNode;
|
|
48
|
-
/**
|
|
49
|
-
* Text content for the tag
|
|
50
|
-
*/
|
|
51
|
-
tagText?: string;
|
|
52
|
-
/**
|
|
53
|
-
* Appearance style for the tag
|
|
54
|
-
* @default "warning"
|
|
55
|
-
*/
|
|
56
|
-
tagAppearance?: "warning" | "primary" | "neutral" | "success" | "danger";
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Props that can be passed to the ProductDataListItem component
|
|
60
|
-
*/
|
|
61
|
-
export type ProductDataListItemProps = ProductDataListItemProperties;
|
|
62
|
-
export declare const ProductDataListItem: React.FC<ProductDataListItemProps>;
|
|
63
|
-
declare const orientation: {
|
|
64
|
-
readonly vertical: "vertical";
|
|
65
|
-
readonly horizontal: "horizontal";
|
|
66
|
-
};
|
|
67
|
-
/**
|
|
68
|
-
* Base type for items that can be sorted
|
|
69
|
-
*/
|
|
70
|
-
export type SortableItemType = {
|
|
71
|
-
/** Unique identifier for the sortable item */
|
|
72
|
-
id: UniqueIdentifier;
|
|
73
|
-
};
|
|
74
|
-
export type InternalDndContextSettings = Omit<DndContextProps, "children" | "sensors" | "collisionDetection" | "onDragStart" | "onDragOver" | "onDragEnd">;
|
|
75
|
-
/**
|
|
76
|
-
* Properties specific to the Sortable component
|
|
77
|
-
*/
|
|
78
|
-
export interface SortableProperties<T extends SortableItemType> {
|
|
79
|
-
/** The children components */
|
|
80
|
-
children: ReactNode;
|
|
81
|
-
/** Whether to disable sorting functionality */
|
|
82
|
-
disabled?: boolean;
|
|
83
|
-
/** The items to be sorted */
|
|
84
|
-
items: T[];
|
|
85
|
-
/** Callback fired when items are reordered */
|
|
86
|
-
onReorder: (items: T[]) => void;
|
|
87
|
-
/** Callback fired when drag starts */
|
|
88
|
-
onDragStart?: (event: DragStartEvent) => void;
|
|
89
|
-
/** Callback fired during drag */
|
|
90
|
-
onDragOver?: (event: DragOverEvent) => void;
|
|
91
|
-
/** Callback fired when drag ends */
|
|
92
|
-
onDragEnd?: (event: DragEndEvent) => void;
|
|
93
|
-
/** The orientation of the sortable list */
|
|
94
|
-
orientation?: typeof orientation.vertical | typeof orientation.horizontal;
|
|
95
|
-
/**
|
|
96
|
-
* Custom sensor options for drag detection
|
|
97
|
-
* @example
|
|
98
|
-
* ```tsx
|
|
99
|
-
* <Sortable
|
|
100
|
-
* sensorOptions={{
|
|
101
|
-
* activationConstraint: {
|
|
102
|
-
* distance: 20, // Allow movements up to 20px
|
|
103
|
-
* delay: 150, // Wait 150ms before canceling
|
|
104
|
-
* tolerance: 5 // Tolerate 5px of movement
|
|
105
|
-
* }
|
|
106
|
-
* }}
|
|
107
|
-
* >
|
|
108
|
-
* ```
|
|
109
|
-
*/
|
|
110
|
-
sensorOptions?: PointerSensorOptions;
|
|
111
|
-
/** Configuration for the drag overlay appearance and behavior */
|
|
112
|
-
overlaySettings?: Omit<DragOverlayProps, "wrapperElement" | "style">;
|
|
113
|
-
/** Settings for the DndContext */
|
|
114
|
-
dndContextSettings?: Omit<InternalDndContextSettings, "accessibility">;
|
|
115
|
-
/** Render function for the dragged item overlay */
|
|
116
|
-
renderOverlay?: (item: T) => ReactNode;
|
|
117
|
-
}
|
|
118
|
-
export type SortableProps<T extends SortableItemType> = SortableProperties<T> & {
|
|
119
|
-
/** Configuration for the drag overlay appearance and behavior */
|
|
120
|
-
overlaySettings?: DragOverlayProps;
|
|
121
|
-
/** Settings for the DndContext */
|
|
122
|
-
dndContextSettings?: InternalDndContextSettings;
|
|
123
|
-
};
|
|
124
|
-
/**
|
|
125
|
-
* Properties specific to the ProductDataListProducts component
|
|
126
|
-
*
|
|
127
|
-
* @template T - The type of each sortable item in the list
|
|
128
|
-
*/
|
|
129
|
-
export interface ProductDataListProductsProperties<T extends SortableItemType> {
|
|
130
|
-
/**
|
|
131
|
-
* The array of items to be rendered and sorted in the list.
|
|
132
|
-
*/
|
|
133
|
-
items: T[];
|
|
134
|
-
/**
|
|
135
|
-
* Callback fired when the order of items changes.
|
|
136
|
-
*
|
|
137
|
-
* @param items - The reordered array of items
|
|
138
|
-
*/
|
|
139
|
-
onReorder: (items: T[]) => void;
|
|
140
|
-
/**
|
|
141
|
-
* If true, enables drag-and-drop sorting for the list items.
|
|
142
|
-
* @default false
|
|
143
|
-
*/
|
|
144
|
-
sortable?: boolean;
|
|
145
|
-
/**
|
|
146
|
-
* Function to render each item in the list.
|
|
147
|
-
*
|
|
148
|
-
* @param item - The item to render
|
|
149
|
-
* @param index - The index of the item in the list
|
|
150
|
-
* @returns The rendered node for the item
|
|
151
|
-
*/
|
|
152
|
-
renderItem: (item: T, index: number) => ReactNode;
|
|
153
|
-
/**
|
|
154
|
-
* Additional properties to pass to the sortable container.
|
|
155
|
-
*/
|
|
156
|
-
sortableProps?: object;
|
|
157
|
-
}
|
|
158
|
-
/**
|
|
159
|
-
* Props that can be passed to the ProductDataListProducts component, including sortable and layout properties.
|
|
160
|
-
*
|
|
161
|
-
* @template T - The type of each sortable item in the list
|
|
162
|
-
*/
|
|
163
|
-
export type ProductDataListProductsProps<T extends SortableItemType> = ProductDataListProductsProperties<T> & {
|
|
164
|
-
/**
|
|
165
|
-
* Additional properties for the sortable container, omitting core sortable and layout props.
|
|
166
|
-
*/
|
|
167
|
-
sortableProps?: Omit<SortableProps<T>, "items" | "onReorder" | "orientation" | "disabled" | "renderOverlay" | "children">;
|
|
168
|
-
} & Omit<BoxProps, "my" | "display" | "flexDirection" | "gap">;
|
|
169
|
-
export declare function ProductDataListProducts<T extends SortableItemType>({ sortable, items, onReorder, renderItem, sortableProps, children, ...props }: ProductDataListProductsProps<T>): React.ReactElement;
|
|
170
|
-
export declare namespace ProductDataListProducts {
|
|
171
|
-
var displayName: string;
|
|
172
|
-
}
|
|
173
|
-
export type ProductDataListSectionProperties = PropsWithChildren<{
|
|
174
|
-
title?: ReactNode;
|
|
175
|
-
description?: ReactNode;
|
|
176
|
-
content?: ReactNode;
|
|
177
|
-
link: ReactNode;
|
|
178
|
-
}>;
|
|
179
|
-
export type ProductDataListSectionProps = ProductDataListSectionProperties & Omit<BoxProps, "padding" | "display" | "flexDirection" | "gap" | "content">;
|
|
180
|
-
export declare const ProductDataListSection: React.FC<ProductDataListSectionProps>;
|
|
181
|
-
export type ProductDataListItemDividerProperties = Pick<BoxProps, "borderTopWidth" | "borderBottomWidth" | "borderColor" | "borderStyle" | "width" | "id">;
|
|
182
|
-
export declare const ProductDataListItemDivider: React.FC<ProductDataListItemDividerProperties>;
|
|
183
|
-
/**
|
|
184
|
-
* Properties specific to the ProductDataList component
|
|
185
|
-
*/
|
|
186
|
-
export interface ProductDataListProperties {
|
|
187
|
-
/**
|
|
188
|
-
* The content to be rendered inside the list
|
|
189
|
-
*/
|
|
190
|
-
children: ReactNode;
|
|
191
|
-
/**
|
|
192
|
-
* Optional title for the list section
|
|
193
|
-
*/
|
|
194
|
-
title?: ReactNode;
|
|
195
|
-
}
|
|
196
|
-
/**
|
|
197
|
-
* Props that can be passed to the ProductDataList component
|
|
198
|
-
*/
|
|
199
|
-
export type ProductDataListProps = ProductDataListProperties & Omit<BoxProps, "padding" | "display" | "flexDirection" | "gap">;
|
|
200
|
-
export interface ProductDataListComponents {
|
|
201
|
-
Products: typeof ProductDataListProducts;
|
|
202
|
-
Item: typeof ProductDataListItem;
|
|
203
|
-
Section: typeof ProductDataListSection;
|
|
204
|
-
ItemDivider: typeof ProductDataListItemDivider;
|
|
205
|
-
}
|
|
206
|
-
export declare const ProductDataList: React.FC<ProductDataListProps> & ProductDataListComponents;
|
|
207
|
-
|
|
208
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components"),require("@nimbus-ds/icons"),require("@dnd-kit/core"),require("@dnd-kit/sortable"),require("@dnd-kit/utilities")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components","@nimbus-ds/icons","@dnd-kit/core","@dnd-kit/sortable","@dnd-kit/utilities"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components"),require("@nimbus-ds/icons"),require("@dnd-kit/core"),require("@dnd-kit/sortable"),require("@dnd-kit/utilities")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"],e["@nimbus-ds/icons"],e["@dnd-kit/core"],e["@dnd-kit/sortable"],e["@dnd-kit/utilities"])}(global,((e,t,r,o,n,a)=>(()=>{"use strict";var i={3454:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataList=void 0;const o=r(5163).__importDefault(r(8156)),n=r(5280),a=r(385),i=({children:e,title:t,...r})=>o.default.createElement(n.Box,{padding:"4",display:"flex",flexDirection:"column",gap:"4",...r},t&&o.default.createElement(n.Title,{as:"h4"},t),e);t.ProductDataList=i,i.Item=a.ProductDataListItem,i.Products=a.ProductDataListProducts,i.Section=a.ProductDataListSection,i.ItemDivider=a.ProductDataListItemDivider,i.displayName="ProductDataList",i.Item.displayName="ProductDataList.Item",i.Products.displayName="ProductDataList.Products",i.ItemDivider.displayName="ProductDataList.ItemDivider",i.Section.displayName="ProductDataList.Section"},3289:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=r(5163);o.__exportStar(r(3660),t),o.__exportStar(r(385),t)},985:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListItem=void 0;const o=r(5163).__importDefault(r(8156)),n=r(5280),a=r(3215),i=r(7880),l=r(8583),c=({id:e,title:t,imageUrl:r,imageAlt:c,isDraggable:u=!1,withDivider:d=!1,onRemove:s,children:f,tagIcon:p,tagText:m,tagAppearance:b="warning"})=>{const y=o.default.createElement(n.Box,{display:"flex",flexDirection:"column",gap:"2"},o.default.createElement(n.Box,{display:"flex",alignItems:"center",gap:"3",px:"2"},u&&o.default.createElement(n.Box,{as:"span",className:"handle",cursor:"grab"},o.default.createElement(i.Sortable.ItemHandle,null,o.default.createElement(n.Box,{display:"flex",alignItems:"center",justifyContent:"center"},o.default.createElement(n.Text,null,o.default.createElement(a.DragDotsIcon,{size:"small"}))))),r&&o.default.createElement(n.Box,{width:"12",height:"12",borderRadius:"1"},o.default.createElement(n.Thumbnail,{src:r,alt:c||t,width:"56px",height:"56px"})),o.default.createElement(n.Box,{flex:"1",display:"flex",flexDirection:"column",gap:"1"},o.default.createElement(n.Text,null,t),m&&p&&o.default.createElement(n.Box,{display:"flex",flexWrap:"wrap",gap:"2",pt:"2"},o.default.createElement(n.Tag,{appearance:b},o.default.createElement(n.Icon,{color:"currentColor",source:p}),m)),f&&o.default.createElement(n.Box,{display:"flex",flexWrap:"wrap",gap:"2",pt:"2"},f)),s&&o.default.createElement(n.Box,{justifyContent:"flex-end"},o.default.createElement(n.IconButton,{source:o.default.createElement(a.TrashIcon,null),size:"2rem",onClick:s}))),d&&o.default.createElement(l.ProductDataListItemDivider,{"data-testid":"divider"}));return u?o.default.createElement(i.Sortable.Item,{key:e,id:e,handle:!0},y):y};t.ProductDataListItem=c,c.displayName="ProductDataList.Item"},2919:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListItem=void 0;var o=r(985);Object.defineProperty(t,"ProductDataListItem",{enumerable:!0,get:function(){return o.ProductDataListItem}})},8583:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListItemDivider=void 0;const o=r(5163).__importDefault(r(8156)),n=r(5280);t.ProductDataListItemDivider=({...e})=>o.default.createElement(n.Box,{borderTopWidth:"1",borderBottomWidth:"none",borderColor:"neutral-surfaceHighlight",borderStyle:"solid",...e})},892:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListItemDivider=void 0;var o=r(8583);Object.defineProperty(t,"ProductDataListItemDivider",{enumerable:!0,get:function(){return o.ProductDataListItemDivider}})},4017:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListProducts=void 0;const o=r(5163).__importStar(r(8156)),n=r(5280),a=r(7880),i=r(892);function l({sortable:e,items:t,onReorder:r,renderItem:l,sortableProps:c,children:u,...d}){const[s,f]=(0,o.useState)(null);return o.default.createElement(a.Sortable,{...c,items:t,onReorder:r,orientation:"vertical",disabled:!e,renderOverlay:e=>o.default.createElement(n.Box,{display:"flex",flexDirection:"column",backgroundColor:"neutral-background",boxShadow:"3",paddingTop:"2"},l(e,0)),onDragStart:e=>{f(e.active.id),c?.onDragStart?.(e)},onDragEnd:e=>{f(null),c?.onDragEnd?.(e)}},o.default.createElement(n.Box,{display:"flex",flexDirection:"column",gap:"2",overflowY:"auto",maxHeight:"370px",...d},u,o.default.createElement(i.ProductDataListItemDivider,null),t.map(((e,t)=>o.default.createElement(o.default.Fragment,{key:e.id},o.default.createElement("div",{"aria-hidden":s===e.id,style:{opacity:s===e.id?0:1}},l(e,t)))))))}t.ProductDataListProducts=l,l.displayName="ProductDataList.Products"},1820:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListProducts=void 0;var o=r(4017);Object.defineProperty(t,"ProductDataListProducts",{enumerable:!0,get:function(){return o.ProductDataListProducts}})},4735:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListSection=void 0;const o=r(5163).__importDefault(r(8156)),n=r(5280);t.ProductDataListSection=({title:e,description:t,content:r,link:a,children:i,...l})=>o.default.createElement(n.Box,{display:"flex",flexDirection:"column",gap:"4",...l},o.default.createElement(n.Box,{display:"flex",flexDirection:"column",gap:"4"},o.default.createElement(n.Box,{display:"flex",flexDirection:"column",gap:"1"},e&&o.default.createElement(n.Text,{fontSize:"highlight"},e),t&&o.default.createElement(n.Text,{color:"neutral-textLow"},t),r),a),i)},3549:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataListSection=void 0;var o=r(4735);Object.defineProperty(t,"ProductDataListSection",{enumerable:!0,get:function(){return o.ProductDataListSection}})},385:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=r(5163);o.__exportStar(r(2919),t),o.__exportStar(r(1820),t),o.__exportStar(r(3549),t),o.__exportStar(r(892),t)},3660:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductDataList=void 0;var o=r(3454);Object.defineProperty(t,"ProductDataList",{enumerable:!0,get:function(){return o.ProductDataList}})},977:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_OVERLAY_SETTINGS=t.orientation=void 0,t.orientation={vertical:"vertical",horizontal:"horizontal"},t.DEFAULT_OVERLAY_SETTINGS={dropAnimation:{duration:0,easing:"ease"}}},8753:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sortable=void 0;const o=r(5163).__importStar(r(8156)),n=r(2948),a=r(1762),i=r(421),l=r(977);function c({items:e,onReorder:t,orientation:r="vertical",sensorOptions:i,onDragStart:c,onDragOver:u,onDragEnd:d,disabled:s=!1,children:f,overlaySettings:p=l.DEFAULT_OVERLAY_SETTINGS,renderOverlay:m,dndContextSettings:b}){const[y,v]=(0,o.useState)(null),_=y?e.find((e=>e.id===y)):null,g=(0,n.useSensors)((0,n.useSensor)(n.PointerSensor,{activationConstraint:{distance:8},...i}),(0,n.useSensor)(n.KeyboardSensor,{coordinateGetter:a.sortableKeyboardCoordinates,...i})),h=(0,o.useMemo)((()=>"vertical"===r?a.verticalListSortingStrategy:a.horizontalListSortingStrategy),[r]);return s?o.default.createElement(o.default.Fragment,null,f):o.default.createElement(n.DndContext,{sensors:g,collisionDetection:n.closestCenter,onDragStart:e=>{v(e.active.id),c?.(e)},onDragOver:u,onDragEnd:r=>{const{active:o,over:n}=r;if(n&&o.id!==n.id){const r=e.findIndex((e=>e.id===o.id)),a=e.findIndex((e=>e.id===n.id)),i=[...e],[l]=i.splice(r,1);i.splice(a,0,l),t(i)}v(null),d?.(r)},...b},o.default.createElement(a.SortableContext,{items:e.map((e=>e.id)),strategy:h},f),o.default.createElement(n.DragOverlay,{...p},_&&m?m(_):null))}t.Sortable=c,c.Item=i.SortableItem,c.ItemHandle=i.SortableItemHandle,c.displayName="Sortable",c.Item.displayName="Sortable.Item",c.ItemHandle.displayName="Sortable.ItemHandle"},6456:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SortableItem=void 0;const o=r(5163).__importStar(r(8156)),n=r(1762),a=r(8927),i=r(3750);t.SortableItem=({id:e,disabled:t=!1,handle:r=!1,children:l,renderItem:c})=>{const{attributes:u,listeners:d,setNodeRef:s,setActivatorNodeRef:f,transform:p,transition:m,isDragging:b}=(0,n.useSortable)({id:e,disabled:t}),y=(0,o.useMemo)((()=>({transform:a.CSS.Transform.toString(p),transition:m,touchAction:"none"})),[p,m]),v=(0,o.useMemo)((()=>({setActivatorNodeRef:f,attributes:u,listeners:d})),[f,u,d]);return c?c({isDragging:b,attributes:u,listeners:r?void 0:d,setNodeRef:s,style:y}):o.default.createElement(i.SortableItemContext.Provider,{value:v},o.default.createElement("div",{ref:s,style:y,...!r&&{...u,...d}},l))}},3750:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useSortableItemContext=t.SortableItemContext=void 0;const o=r(8156);t.SortableItemContext=(0,o.createContext)(null);t.useSortableItemContext=()=>{const e=(0,o.useContext)(t.SortableItemContext);if(!e)throw new Error("useSortableItemContext must be used within a SortableItem");return e}},1882:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SortableItem=void 0;var o=r(6456);Object.defineProperty(t,"SortableItem",{enumerable:!0,get:function(){return o.SortableItem}})},3429:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SortableItemHandle=void 0;const o=r(5163).__importDefault(r(8156)),n=r(5280),a=r(3750),i=({children:e})=>{const{setActivatorNodeRef:t,attributes:r,listeners:i}=(0,a.useSortableItemContext)();return o.default.createElement(n.Box,{...r,...i,ref:t,cursor:"grab"},e)};t.SortableItemHandle=i,i.displayName="SortableItemHandle"},2595:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SortableItemHandle=void 0;var o=r(3429);Object.defineProperty(t,"SortableItemHandle",{enumerable:!0,get:function(){return o.SortableItemHandle}})},421:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=r(5163);o.__exportStar(r(1882),t),o.__exportStar(r(2595),t)},7880:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Sortable=void 0;const o=r(8753);var n=r(8753);Object.defineProperty(t,"Sortable",{enumerable:!0,get:function(){return n.Sortable}}),t.default=o.Sortable},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>w,__asyncGenerator:()=>D,__asyncValues:()=>O,__await:()=>x,__awaiter:()=>m,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>C,__classPrivateFieldSet:()=>M,__createBinding:()=>y,__decorate:()=>l,__esDecorate:()=>u,__exportStar:()=>v,__extends:()=>n,__generator:()=>b,__importDefault:()=>L,__importStar:()=>E,__makeTemplateObject:()=>I,__metadata:()=>p,__param:()=>c,__propKey:()=>s,__read:()=>g,__rest:()=>i,__runInitializers:()=>d,__setFunctionName:()=>f,__spread:()=>h,__spreadArray:()=>S,__spreadArrays:()=>P,__values:()=>_});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},o(e,t)};function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}function l(e,t,r,o){var n,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,o);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(i=(a<3?n(i):a>3?n(t,r,i):n(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function c(e,t){return function(r,o){t(r,o,e)}}function u(e,t,r,o,n,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var l,c=o.kind,u="getter"===c?"get":"setter"===c?"set":"value",d=!t&&e?o.static?e:e.prototype:null,s=t||(d?Object.getOwnPropertyDescriptor(d,o.name):{}),f=!1,p=r.length-1;p>=0;p--){var m={};for(var b in o)m[b]="access"===b?{}:o[b];for(var b in o.access)m.access[b]=o.access[b];m.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var y=(0,r[p])("accessor"===c?{get:s.get,set:s.set}:s[u],m);if("accessor"===c){if(void 0===y)continue;if(null===y||"object"!=typeof y)throw new TypeError("Object expected");(l=i(y.get))&&(s.get=l),(l=i(y.set))&&(s.set=l),(l=i(y.init))&&n.push(l)}else(l=i(y))&&("field"===c?n.push(l):s[u]=l)}d&&Object.defineProperty(d,o.name,s),f=!0}function d(e,t,r){for(var o=arguments.length>2,n=0;n<t.length;n++)r=o?t[n].call(e,r):t[n].call(e);return o?r:void 0}function s(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function m(e,t,r,o){return new(r||(r=Promise))((function(n,a){function i(e){try{c(o.next(e))}catch(e){a(e)}}function l(e){try{c(o.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,l)}c((o=o.apply(e,t||[])).next())}))}function b(e,t){var r,o,n,a,i={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return a={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(l){return function(c){return function(l){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,l[0]&&(i=0)),i;)try{if(r=1,o&&(n=2&l[0]?o.return:l[0]?o.throw||((n=o.return)&&n.call(o),0):o.next)&&!(n=n.call(o,l[1])).done)return n;switch(o=0,n&&(l=[2&l[0],n.value]),l[0]){case 0:case 1:n=l;break;case 4:return i.label++,{value:l[1],done:!1};case 5:i.label++,o=l[1],l=[0];continue;case 7:l=i.ops.pop(),i.trys.pop();continue;default:if(!(n=i.trys,(n=n.length>0&&n[n.length-1])||6!==l[0]&&2!==l[0])){i=0;continue}if(3===l[0]&&(!n||l[1]>n[0]&&l[1]<n[3])){i.label=l[1];break}if(6===l[0]&&i.label<n[1]){i.label=n[1],n=l;break}if(n&&i.label<n[2]){i.label=n[2],i.ops.push(l);break}n[2]&&i.ops.pop(),i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e],o=0}finally{r=n=0}if(5&l[0])throw l[1];return{value:l[0]?l[1]:void 0,done:!0}}([l,c])}}}var y=Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||y(t,e,r)}function _(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],o=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function g(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var o,n,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(e){n={error:e}}finally{try{o&&!o.done&&(r=a.return)&&r.call(a)}finally{if(n)throw n.error}}return i}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(g(arguments[t]));return e}function P(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var o=Array(e),n=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,l=a.length;i<l;i++,n++)o[n]=a[i];return o}function S(e,t,r){if(r||2===arguments.length)for(var o,n=0,a=t.length;n<a;n++)!o&&n in t||(o||(o=Array.prototype.slice.call(t,0,n)),o[n]=t[n]);return e.concat(o||Array.prototype.slice.call(t))}function x(e){return this instanceof x?(this.v=e,this):new x(e)}function D(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,n=r.apply(e,t||[]),a=[];return o={},i("next"),i("throw"),i("return"),o[Symbol.asyncIterator]=function(){return this},o;function i(e){n[e]&&(o[e]=function(t){return new Promise((function(r,o){a.push([e,t,r,o])>1||l(e,t)}))})}function l(e,t){try{(r=n[e](t)).value instanceof x?Promise.resolve(r.value.v).then(c,u):d(a[0][2],r)}catch(e){d(a[0][3],e)}var r}function c(e){l("next",e)}function u(e){l("throw",e)}function d(e,t){e(t),a.shift(),a.length&&l(a[0][0],a[0][1])}}function w(e){var t,r;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,n){t[o]=e[o]?function(t){return(r=!r)?{value:x(e[o](t)),done:!1}:n?n(t):t}:n}}function O(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=_(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(r){t[r]=e[r]&&function(t){return new Promise((function(o,n){(function(e,t,r,o){Promise.resolve(o).then((function(t){e({value:t,done:r})}),t)})(o,n,(t=e[r](t)).done,t.value)}))}}}function I(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var j=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function E(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&y(t,e,r);return j(t,e),t}function L(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,o){if("a"===r&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?o:"a"===r?o.call(e):o?o.value:t.get(e)}function M(e,t,r,o,n){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?n.call(e,r):n?n.value=r:t.set(e,r),r}function C(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},2948:e=>{e.exports=o},1762:e=>{e.exports=n},8927:e=>{e.exports=a},5280:e=>{e.exports=t},3215:e=>{e.exports=r},8156:t=>{t.exports=e}},l={};function c(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}};return i[e](r,r.exports,c),r.exports}return c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c(3289)})()));
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
// Generated by dts-bundle-generator v8.1.2
|
|
2
|
-
|
|
3
|
-
import { BoxProperties, PopoverProperties } from '@nimbus-ds/components';
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { HTMLAttributes, ReactNode } from 'react';
|
|
6
|
-
|
|
7
|
-
export interface ProductUpdatesPaginatorProperties {
|
|
8
|
-
/**
|
|
9
|
-
* Total number of items/steps in the pagination.
|
|
10
|
-
*/
|
|
11
|
-
totalItems: number;
|
|
12
|
-
/**
|
|
13
|
-
* Zero-based index of the currently active item.
|
|
14
|
-
*/
|
|
15
|
-
activeIndex: number;
|
|
16
|
-
}
|
|
17
|
-
export type ProductUpdatesPaginatorProps = ProductUpdatesPaginatorProperties & Omit<HTMLAttributes<HTMLElement>, "color" | "className" | "style">;
|
|
18
|
-
export declare const ProductUpdatesPaginator: React.FC<ProductUpdatesPaginatorProps>;
|
|
19
|
-
export interface ProductUpdatesFooterProperties {
|
|
20
|
-
/**
|
|
21
|
-
* Optional link rendered on the left side of the footer.
|
|
22
|
-
* @TJS-type React.ReactNode
|
|
23
|
-
*/
|
|
24
|
-
leftLink?: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* Optional paginator element rendered in the center of the footer.
|
|
27
|
-
* @TJS-type React.ReactNode
|
|
28
|
-
*/
|
|
29
|
-
paginator?: ReactNode;
|
|
30
|
-
/**
|
|
31
|
-
* Optional action button rendered on the right side of the footer.
|
|
32
|
-
* @TJS-type React.ReactNode
|
|
33
|
-
*/
|
|
34
|
-
rightButton?: ReactNode;
|
|
35
|
-
/**
|
|
36
|
-
* When true, renders a full-width divider above the footer content.
|
|
37
|
-
* @default false
|
|
38
|
-
*/
|
|
39
|
-
renderDivider?: boolean;
|
|
40
|
-
}
|
|
41
|
-
export type ProductUpdatesFooterProps = ProductUpdatesFooterProperties & Omit<BoxProperties, "pt" | "children">;
|
|
42
|
-
export declare const ProductUpdatesFooter: React.FC<ProductUpdatesFooterProps>;
|
|
43
|
-
export interface ProductUpdatesComponents {
|
|
44
|
-
Paginator: typeof ProductUpdatesPaginator;
|
|
45
|
-
Footer: typeof ProductUpdatesFooter;
|
|
46
|
-
}
|
|
47
|
-
export interface ProductUpdatesProperties extends Omit<PopoverProperties, "content" | "appearance" | "padding" | "enabledDismiss"> {
|
|
48
|
-
/**
|
|
49
|
-
* Title of the Popover.
|
|
50
|
-
*/
|
|
51
|
-
title: string;
|
|
52
|
-
/**
|
|
53
|
-
* Content text of the Popover.
|
|
54
|
-
*/
|
|
55
|
-
text: string;
|
|
56
|
-
/**
|
|
57
|
-
* Optional tag element rendered inline before the title.
|
|
58
|
-
* @TJS-type React.ReactNode
|
|
59
|
-
*/
|
|
60
|
-
tag?: ReactNode;
|
|
61
|
-
/**
|
|
62
|
-
* Optional content for the body of the Popover.
|
|
63
|
-
* @TJS-type React.ReactNode
|
|
64
|
-
*/
|
|
65
|
-
bodyContent?: ReactNode;
|
|
66
|
-
/**
|
|
67
|
-
* Optional properties for the content container of the popover body.
|
|
68
|
-
*/
|
|
69
|
-
bodyContentProps?: Omit<BoxProperties, "children">;
|
|
70
|
-
/**
|
|
71
|
-
* Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner.
|
|
72
|
-
* @TJS-type React.ReactNode
|
|
73
|
-
*/
|
|
74
|
-
dismissLink?: ReactNode;
|
|
75
|
-
}
|
|
76
|
-
export type ProductUpdatesProps = ProductUpdatesProperties & HTMLAttributes<HTMLElement>;
|
|
77
|
-
export declare const ProductUpdates: React.FC<ProductUpdatesProps> & ProductUpdatesComponents;
|
|
78
|
-
|
|
79
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components"),require("@nimbus-ds/icons")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components","@nimbus-ds/icons"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components"),require("@nimbus-ds/icons")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"],e["@nimbus-ds/icons"])}(global,((e,t,r)=>(()=>{"use strict";var n={6666:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdates=void 0;const n=r(5163).__importStar(r(8156)),o=r(5280),a=r(3215),i=r(1880),c=({style:e,title:t,text:r,tag:i,bodyContent:c,dismissLink:l,bodyContentProps:u,...s})=>{const[f,d]=(0,n.useState)(!!s.visible),p=s?.onVisibility?()=>s.onVisibility?.(!1):()=>d(!f),y=n.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"2",width:"100%"},i?n.default.createElement(o.Box,{display:"flex",flexDirection:"row",alignItems:"center",gap:"2"},i,n.default.createElement(o.Text,{color:"neutral-background",fontSize:"base",fontWeight:"bold"},t)):n.default.createElement(o.Text,{color:"neutral-background",fontSize:"base",fontWeight:"bold"},t),n.default.createElement(o.Text,{color:"neutral-background",fontSize:"base"},r)),b=l?n.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"4",width:"100%",...u},y,c,n.default.createElement(o.Link,{as:"button",onClick:p,appearance:"neutral-background"},l)):n.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"4",width:"100%",...u},n.default.createElement(o.Box,{pr:"8",position:"relative"},y,n.default.createElement(o.Box,{position:"absolute",top:"-16px",right:"-16px"},n.default.createElement(o.IconButton,{onClick:p,"aria-label":"Close",size:"2.75rem",source:n.default.createElement(o.Icon,{color:"neutral-background",source:n.default.createElement(a.CloseIcon,null)}),borderColor:"transparent",backgroundColor:"transparent"}))),c);return n.default.createElement(o.Popover,{...s,backgroundColor:"primary-interactiveHover",content:b,visible:void 0===s.visible?f:s.visible,onVisibility:s.onVisibility||(e=>d(e)),enabledDismiss:!1,enabledClick:!1})};t.ProductUpdates=c,c.Paginator=i.ProductUpdatesPaginator,c.Footer=i.ProductUpdatesFooter,c.displayName="ProductUpdates",c.Paginator.displayName="ProductUpdates.Paginator",c.Footer.displayName="ProductUpdates.Footer"},4096:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(6787),t),n.__exportStar(r(1880),t)},3016:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdatesFooter=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280),a=({leftLink:e,paginator:t,rightButton:r,renderDivider:a,...i})=>n.default.createElement(o.Box,{...i},a&&n.default.createElement(o.Box,null,n.default.createElement(o.Divider,{appearance:"primary",marginLeft:"-16px",marginRight:"-16px",width:"auto"})),n.default.createElement(o.Box,{paddingTop:"4",display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",width:"100%"},e&&n.default.createElement(o.Box,{display:"flex",alignItems:"center",flex:"1",mr:"2"},e),t&&n.default.createElement(o.Box,{display:"flex",flex:"2",alignItems:"center",justifyContent:"flex-start"},t),r&&n.default.createElement(o.Box,{display:"flex",alignItems:"center",justifyContent:"flex-end",flex:"1"},r)));t.ProductUpdatesFooter=a,a.displayName="ProductUpdatesFooter"},4743:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdatesFooter=void 0;const n=r(3016);var o=r(3016);Object.defineProperty(t,"ProductUpdatesFooter",{enumerable:!0,get:function(){return o.ProductUpdatesFooter}}),t.default=n.ProductUpdatesFooter},649:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdatesPaginator=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280);t.ProductUpdatesPaginator=({totalItems:e,activeIndex:t,...r})=>n.default.createElement(o.Box,{display:"flex",flexDirection:"row",gap:"1-5",alignItems:"center",role:"img","aria-label":`Step ${t+1} of ${e}`,...r},Array.from({length:e},((e,t)=>t)).map((e=>n.default.createElement(o.Box,{key:`paginator-dot-${e}`,width:e===t?"24px":"6px",height:"6px",borderRadius:"full",backgroundColor:e===t?"neutral-background":"primary-textLow","aria-hidden":"true"}))))},8332:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdatesPaginator=void 0;const n=r(649);var o=r(649);Object.defineProperty(t,"ProductUpdatesPaginator",{enumerable:!0,get:function(){return o.ProductUpdatesPaginator}}),t.default=n.ProductUpdatesPaginator},1880:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(8332),t),n.__exportStar(r(4743),t)},6787:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ProductUpdates=void 0;const n=r(6666);var o=r(6666);Object.defineProperty(t,"ProductUpdates",{enumerable:!0,get:function(){return o.ProductUpdates}}),t.default=n.ProductUpdates},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>j,__asyncGenerator:()=>O,__asyncValues:()=>E,__await:()=>P,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>B,__classPrivateFieldSet:()=>C,__createBinding:()=>m,__decorate:()=>c,__esDecorate:()=>u,__exportStar:()=>v,__extends:()=>o,__generator:()=>b,__importDefault:()=>I,__importStar:()=>k,__makeTemplateObject:()=>S,__metadata:()=>p,__param:()=>l,__propKey:()=>f,__read:()=>h,__rest:()=>i,__runInitializers:()=>s,__setFunctionName:()=>d,__spread:()=>g,__spreadArray:()=>x,__spreadArrays:()=>w,__values:()=>_});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function c(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function l(e,t){return function(r,n){t(r,n,e)}}function u(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var c,l=n.kind,u="getter"===l?"get":"setter"===l?"set":"value",s=!t&&e?n.static?e:e.prototype:null,f=t||(s?Object.getOwnPropertyDescriptor(s,n.name):{}),d=!1,p=r.length-1;p>=0;p--){var y={};for(var b in n)y[b]="access"===b?{}:n[b];for(var b in n.access)y.access[b]=n.access[b];y.addInitializer=function(e){if(d)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var m=(0,r[p])("accessor"===l?{get:f.get,set:f.set}:f[u],y);if("accessor"===l){if(void 0===m)continue;if(null===m||"object"!=typeof m)throw new TypeError("Object expected");(c=i(m.get))&&(f.get=c),(c=i(m.set))&&(f.set=c),(c=i(m.init))&&o.push(c)}else(c=i(m))&&("field"===l?o.push(c):f[u]=c)}s&&Object.defineProperty(s,n.name,f),d=!0}function s(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function d(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function c(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}l((n=n.apply(e,t||[])).next())}))}function b(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(l){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return i.label++,{value:c[1],done:!1};case 5:i.label++,n=c[1],c=[0];continue;case 7:c=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){i=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){i.label=c[1];break}if(6===c[0]&&i.label<o[1]){i.label=o[1],o=c;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(c);break}o[2]&&i.ops.pop(),i.trys.pop();continue}c=t.call(e,i)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,l])}}}var m=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||m(t,e,r)}function _(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(h(arguments[t]));return e}function w(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function x(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function P(e){return this instanceof P?(this.v=e,this):new P(e)}function O(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof P?Promise.resolve(r.value.v).then(l,u):s(a[0][2],r)}catch(e){s(a[0][3],e)}var r}function l(e){c("next",e)}function u(e){c("throw",e)}function s(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function j(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:P(e[n](t)),done:!1}:o?o(t):t}:o}}function E(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=_(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function S(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var U=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&m(t,e,r);return U(t,e),t}function I(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function C(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function B(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},5280:e=>{e.exports=t},3215:e=>{e.exports=r},8156:t=>{t.exports=e}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}return a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a(4096)})()));
|
package/dist/README.md
DELETED
|
@@ -1,235 +0,0 @@
|
|
|
1
|
-
# `@nimbus-ds/patterns`
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@nimbus-ds/patterns)
|
|
4
|
-
|
|
5
|
-
Nimbus components is a component library built with [React](https://reactjs.org), designed to help our teams and ecosystem build better products for our merchants.
|
|
6
|
-
|
|
7
|
-
## 🚀 Getting started
|
|
8
|
-
|
|
9
|
-
Install `@nimbus-ds/patterns` using any package manager.
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
$ yarn add @nimbus-ds/patterns
|
|
13
|
-
# or
|
|
14
|
-
$ npm install @nimbus-ds/patterns
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## 💻 Usage
|
|
18
|
-
|
|
19
|
-
```jsx
|
|
20
|
-
import { Button } from "@nimbus-ds/patterns";
|
|
21
|
-
|
|
22
|
-
const ComponentExample = () => <Button>Hello World</Button>;
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
For more information about our components, check out our [Storybook](https://tiendanube.github.io/nimbus-design-system/).
|
|
26
|
-
|
|
27
|
-
### Folder & file structures 📁 📄
|
|
28
|
-
|
|
29
|
-
- For best practices in structure files please read this [document](https://redux.js.org/style-guide/style-guide#structure-files-as-feature-folders-with-single-file-logic)
|
|
30
|
-
- When creating a new component, do so inside the **src/atomic** or **src/composite** directory
|
|
31
|
-
|
|
32
|
-
```
|
|
33
|
-
├─ 📁 src
|
|
34
|
-
│ └─ 📁 components
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
- Every directory must contain a 📄 **CHANGELOG.md** which serves to document all changes and changes made to each component.
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
├─ 📁 src
|
|
41
|
-
│ ├─ 📁 components
|
|
42
|
-
│ │ ├─ 📁 ComponentExample
|
|
43
|
-
│ │ │ ├─ 📁 src
|
|
44
|
-
│ │ │ └─ CHANGELOG.md
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
- Every directory should contain a 📄 **README.md** which serves to document the installation steps and a brief summary of each component.
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
├─ 📁 src
|
|
51
|
-
│ ├─ 📁 components
|
|
52
|
-
│ │ ├─ 📁 ComponentExample
|
|
53
|
-
│ │ │ ├─ 📁 src
|
|
54
|
-
│ │ │ ├─ CHANGELOG.md
|
|
55
|
-
│ │ │ └─ README.md
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
- The directory should have the same name as the component. The component file should have the name of the component in Pascal Case format and the extension `.tsx`
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
├─ 📁 src
|
|
62
|
-
│ ├─ 📁 components
|
|
63
|
-
│ │ ├─ 📁 ComponentExample
|
|
64
|
-
│ │ │ ├─ 📁 src
|
|
65
|
-
│ │ │ │ └─ ComponentExample.tsx
|
|
66
|
-
│ │ │ ├─ CHANGELOG.md
|
|
67
|
-
│ │ │ └─ README.md
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
- Every directory should contain a 📄 **index.ts** which serves as an entry point for the module, component, utils and/or hooks.
|
|
71
|
-
|
|
72
|
-
```
|
|
73
|
-
├─ 📁 src
|
|
74
|
-
│ ├─ 📁 components
|
|
75
|
-
│ │ ├─ 📁 ComponentExample
|
|
76
|
-
│ │ │ ├─ 📁 src
|
|
77
|
-
│ │ │ │ ├─ index.ts
|
|
78
|
-
│ │ │ │ └─ ComponentExample.tsx
|
|
79
|
-
│ │ │ ├─ CHANGELOG.md
|
|
80
|
-
│ │ │ └─ README.md
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
- Every component, utils and/or hooks should come with a test. The test must have the same name as the file being tested and the extension must be `.spec.tsx`
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
├─ 📁 src
|
|
87
|
-
│ ├─ 📁 components
|
|
88
|
-
│ │ ├─ 📁 ComponentExample
|
|
89
|
-
│ │ │ ├─ 📁 src
|
|
90
|
-
│ │ │ │ ├─ index.ts
|
|
91
|
-
│ │ │ │ ├─ ComponentExample.tsx
|
|
92
|
-
│ │ │ │ └─ componentExample.spec.tsx
|
|
93
|
-
│ │ │ ├─ CHANGELOG.md
|
|
94
|
-
│ │ │ └─ README.md
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
- Every component must come with documentation. The documentation must have the same name as the file being documented and the extension must be `.stories.tsx`.
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
├─ 📁 src
|
|
101
|
-
│ ├─ 📁 components
|
|
102
|
-
│ │ ├─ 📁 ComponentExample
|
|
103
|
-
│ │ │ ├─ 📁 src
|
|
104
|
-
│ │ │ │ ├─ index.ts
|
|
105
|
-
│ │ │ │ ├─ ComponentExample.tsx
|
|
106
|
-
│ │ │ │ ├─ componentExample.spec.tsx
|
|
107
|
-
│ │ │ │ └─ componentExample.stories.tsx
|
|
108
|
-
│ │ │ ├─ CHANGELOG.md
|
|
109
|
-
│ │ │ └─ README.md
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
- Every component must come with a typing. The type must have the same name as the file being documented and the extension must be `.types.tsx`.
|
|
113
|
-
|
|
114
|
-
```
|
|
115
|
-
├─ 📁 src
|
|
116
|
-
│ ├─ 📁 components
|
|
117
|
-
│ │ ├─ 📁 ComponentExample
|
|
118
|
-
│ │ │ ├─ 📁 src
|
|
119
|
-
│ │ │ │ ├─ index.ts
|
|
120
|
-
│ │ │ │ ├─ ComponentExample.tsx
|
|
121
|
-
│ │ │ │ ├─ componentExample.spec.tsx
|
|
122
|
-
│ │ │ │ ├─ componentExample.stories.tsx
|
|
123
|
-
│ │ │ │ └─ componentExample.types.ts
|
|
124
|
-
│ │ │ ├─ CHANGELOG.md
|
|
125
|
-
│ │ │ └─ README.md
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
- If a component has one or more children components, a subdirectory **📁 components** must be created inside de main directory of the component.
|
|
129
|
-
|
|
130
|
-
```
|
|
131
|
-
├─ 📁 src
|
|
132
|
-
│ ├─ 📁 components
|
|
133
|
-
│ │ ├─ 📁 ComponentExample
|
|
134
|
-
│ │ │ ├─ 📁 src
|
|
135
|
-
│ │ │ │ ├─ 📁 components
|
|
136
|
-
│ │ │ │ │ ├─ 📁 ComponentChild
|
|
137
|
-
│ │ │ │ │ │ ├─ index.ts
|
|
138
|
-
│ │ │ │ │ │ ├─ ComponentChild.tsx
|
|
139
|
-
│ │ │ │ │ │ ├─ componentChild.spec.tsx
|
|
140
|
-
│ │ │ │ │ │ └─ componentExample.types.ts
|
|
141
|
-
│ │ │ │ │ └─ index.ts
|
|
142
|
-
│ │ │ │ ├─ index.ts
|
|
143
|
-
│ │ │ │ ├─ ComponentExample.tsx
|
|
144
|
-
│ │ │ │ ├─ componentExample.spec.tsx
|
|
145
|
-
│ │ │ │ ├─ componentExample.stories.tsx
|
|
146
|
-
│ │ │ │ └─ componentExample.types.ts
|
|
147
|
-
│ │ │ ├─ CHANGELOG.md
|
|
148
|
-
│ │ │ └─ README.md
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
### Component coding 🤖 ⌨️
|
|
152
|
-
|
|
153
|
-
- The component should have the same name as the file using Pascal Case format. It should be declared in a Arrow Function, always typying the expected answer and making the default export at the end of the file.
|
|
154
|
-
|
|
155
|
-
```jsx
|
|
156
|
-
// ComponentExample.tsx
|
|
157
|
-
import React from "react";
|
|
158
|
-
|
|
159
|
-
const ComponentExample: React.FC = () => <div>...</div>;
|
|
160
|
-
|
|
161
|
-
export { ComponentExample };
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
- If the component has props, they will be imported from the corresponding `.definitions.ts` file adding initial prefix corresponding to their type. Example interface ` ILogin`, type `TLogin`, enum `ELogin`.
|
|
165
|
-
|
|
166
|
-
```jsx
|
|
167
|
-
// ComponentExample.tsx
|
|
168
|
-
import React from "react";
|
|
169
|
-
import { ComponentExampleProps } from "./componentExampleProps.types";
|
|
170
|
-
|
|
171
|
-
const ComponentExample: React.FC<ComponentExampleProps> = ({
|
|
172
|
-
title,
|
|
173
|
-
description,
|
|
174
|
-
}) => (
|
|
175
|
-
<div>
|
|
176
|
-
<h1>{title}</h1>
|
|
177
|
-
<p>{description}</p>
|
|
178
|
-
</div>
|
|
179
|
-
);
|
|
180
|
-
|
|
181
|
-
export { ComponentExample };
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### Testing 🧪🔬
|
|
185
|
-
|
|
186
|
-
- For testing best practices, please read this [document](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library).
|
|
187
|
-
- To create a test is necessary to import from the testing library both the render and the screen.
|
|
188
|
-
|
|
189
|
-
```jsx
|
|
190
|
-
import { render, screen } from "@testing-library/react";
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
- The component to be tested should also be imported.
|
|
194
|
-
|
|
195
|
-
```jsx
|
|
196
|
-
import { render, screen } from "@testing-library/react";
|
|
197
|
-
import { ComponentExample } from "./ComponentExample";
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
- The heading of the tests must be written following the order Given-When-Then [Documentation](https://cucumber.io/docs/gherkin/reference/)
|
|
201
|
-
- **Given** represents a precondition
|
|
202
|
-
- **When** an action
|
|
203
|
-
- **Then** a result or consequence of the action (user acceptance criteria).
|
|
204
|
-
- **And** a result or consequence of other consequence (user acceptance criteria).
|
|
205
|
-
- **But** a result which should not be possibly observable
|
|
206
|
-
|
|
207
|
-
```jsx
|
|
208
|
-
import { render, screen } from "@testing-library/react";
|
|
209
|
-
import { ComponentExample } from "./ComponentExample";
|
|
210
|
-
|
|
211
|
-
describe("GIVEN <ComponentExample />", () => {
|
|
212
|
-
describe("WHEN rendered", () => {
|
|
213
|
-
it("THEN should display the correct text", () => {
|
|
214
|
-
...
|
|
215
|
-
});
|
|
216
|
-
});
|
|
217
|
-
});
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
- In this first instance, we will verify the right rendering of the component by checking the text in each of the elements.
|
|
221
|
-
|
|
222
|
-
```jsx
|
|
223
|
-
import { render, screen } from "@testing-library/react";
|
|
224
|
-
import { ComponentExample } from "./ComponentExample";
|
|
225
|
-
|
|
226
|
-
describe("GIVEN <ComponentExample />", () => {
|
|
227
|
-
describe("WHEN rendered", () => {
|
|
228
|
-
it("THEN should display the correct text", () => {
|
|
229
|
-
render(<ComponentExample title="title" description="description" />);
|
|
230
|
-
expect(screen.getByText(/title/i)).toBeInTheDocument();
|
|
231
|
-
expect(screen.getByText(/description/i)).toBeInTheDocument();
|
|
232
|
-
});
|
|
233
|
-
});
|
|
234
|
-
});
|
|
235
|
-
```
|