@abgov/ui-components-common 1.0.0-alpha.4

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/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";
package/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './lib/common';
package/index.js ADDED
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,265 @@
1
+ export type GoabSpinnerType = "infinite" | "progress";
2
+ export type GoabSpinnerSize = "small" | "medium" | "large" | "xlarge";
3
+ export type GoabRadioGroupOnChangeDetail = {
4
+ name: string;
5
+ value: string;
6
+ };
7
+ export type GoabInputOnChangeDetail<T = string> = {
8
+ name: string;
9
+ value: T;
10
+ };
11
+ export type GoabInputOnFocusDetail<T = string> = GoabInputOnChangeDetail<T>;
12
+ export type GoaInputOnBlurDetail<T = string> = GoabInputOnChangeDetail<T>;
13
+ export type GoabInputAutoCapitalize = "on" | "off" | "none" | "sentences" | "words" | "characters";
14
+ export type GoabInputOnKeyPressDetail<T = string> = {
15
+ name: string;
16
+ value: T;
17
+ key: T;
18
+ };
19
+ export type GoabFormStepperOnChangeDetail = {
20
+ step: number;
21
+ };
22
+ export type GoabFileUploadInputOnSelectFileDetail = {
23
+ file: File;
24
+ };
25
+ export type GoabFileUploadOnCancelDetail = {
26
+ filename: string;
27
+ };
28
+ export type GoabFileUploadOnDeleteDetail = {
29
+ filename: string;
30
+ };
31
+ export type GoabDropdownItemMountType = "append" | "prepend" | "reset";
32
+ export type GoabDropdownOnChangeDetail = {
33
+ name?: string;
34
+ value?: string;
35
+ values?: string[];
36
+ };
37
+ export type GoabDatePickerOnChangeDetail = {
38
+ name?: string;
39
+ value: string | Date | undefined;
40
+ };
41
+ export type GoabChipVariant = "filter";
42
+ export type GoabChipTheme = "outline" | "filled";
43
+ export type GoabFilterChipTheme = "outline" | "filled";
44
+ export type GoabCheckboxOnChangeDetail = {
45
+ name?: string;
46
+ value?: string;
47
+ checked: boolean;
48
+ binding: "value" | "check";
49
+ };
50
+ export type GoabCalendarOnChangeDetail = {
51
+ name?: string;
52
+ value: string;
53
+ };
54
+ export type GoabBadgeType = "information" | "success" | "important" | "emergency" | "dark" | "midtone" | "light";
55
+ export type GoabPaginationVariant = "all" | "links-only";
56
+ export type GoabPaginationOnChangeDetail = {
57
+ page: number;
58
+ };
59
+ export type GoabFormStepperType = "constrained" | "free";
60
+ export type GoabFormStepStatus = "complete" | "incomplete" | "unstarted";
61
+ export type GoabFormItemLabelSize = "regular" | "large";
62
+ export type GoabFormItemRequirement = "optional" | "required";
63
+ export type GoabFileUploadInputVariant = "dragdrop" | "button";
64
+ export type GoabContainerAccent = "thick" | "thin" | "filled";
65
+ export type GoabContainerPadding = "relaxed" | "compact";
66
+ export type GoabContainerType = "interactive" | "non-interactive" | "info" | "error" | "success" | "important";
67
+ export type GoabContainerWidth = "full" | "content";
68
+ export type GoabCalloutType = "information" | "success" | "important" | "emergency" | "event";
69
+ export type GoabCalloutSize = "medium" | "large";
70
+ export type GoabCalloutAriaLive = "off" | "polite" | "assertive";
71
+ export type GoabCalloutIconTheme = "outline" | "filled";
72
+ export type GoabButtonType = "primary" | "submit" | "secondary" | "tertiary" | "start";
73
+ export type GoabButtonSize = "compact" | "normal";
74
+ export type GoabButtonVariant = "normal" | "destructive";
75
+ export type GoabButtonGroupAlignment = "start" | "end" | "center";
76
+ export type GoabButtonGroupGap = "relaxed" | "compact";
77
+ export type GoabAccordionHeadingSize = "small" | "medium";
78
+ export type GoabAccordionIconPosition = "left" | "right";
79
+ export type GoabTooltipPosition = "top" | "bottom" | "left" | "right";
80
+ export type GoabTooltipHorizontalAlignment = "left" | "right" | "center";
81
+ export type GoabTextAreaCountBy = "character" | "word" | "";
82
+ export type GoabTextAreaOnChangeDetail = {
83
+ name: string;
84
+ value: string;
85
+ };
86
+ export type GoabTextAreaOnKeyPressDetail = {
87
+ name: string;
88
+ value: string;
89
+ key: string;
90
+ };
91
+ export interface GoabTabsProps {
92
+ initialTab?: number;
93
+ }
94
+ export type GoabTabsOnChangeDetail = {
95
+ tab: number;
96
+ };
97
+ export type GoabTableVariant = "normal" | "relaxed";
98
+ export type GoabTableSortDirection = "asc" | "desc" | "none";
99
+ export interface GoabTableProps extends Margins {
100
+ width?: string;
101
+ onSort?: (sortBy: string, sortDir: number) => void;
102
+ variant?: GoabTableVariant;
103
+ testId?: string;
104
+ }
105
+ export type GoabTableOnSortDetail = {
106
+ sortBy: string;
107
+ sortDir: number;
108
+ };
109
+ export type GoabSpacerHorizontalSpacing = Spacing | "fill";
110
+ export type GoabSpacerVerticalSpacing = Spacing;
111
+ export interface GoabSpacerProps {
112
+ hSpacing?: Spacing | "fill";
113
+ vSpacing?: Spacing;
114
+ testId?: string;
115
+ }
116
+ export interface GoabSkeletonProps extends Margins {
117
+ maxWidth?: string;
118
+ size?: GoabSkeletonSize;
119
+ lineCount?: number;
120
+ type: GoabSkeletonType;
121
+ testId?: string;
122
+ }
123
+ export type GoabSkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile" | "article";
124
+ export type GoabSkeletonSize = "1" | "2" | "3" | "4";
125
+ export type GoabRadioGroupOrientation = "horizontal" | "vertical";
126
+ export interface GoabRadioGroup extends Margins {
127
+ name: string;
128
+ value?: string;
129
+ disabled?: boolean;
130
+ orientation?: GoabRadioGroupOrientation;
131
+ testId?: string;
132
+ error?: boolean;
133
+ ariaLabel?: string;
134
+ }
135
+ export interface GoabRadioItem {
136
+ value?: string;
137
+ label?: string;
138
+ name?: string;
139
+ disabled?: boolean;
140
+ checked?: boolean;
141
+ error?: boolean;
142
+ testId?: string;
143
+ }
144
+ export type GoabCircularProgressVariant = "fullscreen" | "inline";
145
+ export type GoabCircularProgressSize = "small" | "large";
146
+ export type GoabPopoverPosition = "above" | "below" | "auto";
147
+ export interface GoabPopoverProps extends Margins {
148
+ testId?: string;
149
+ maxWidth?: string;
150
+ padded?: boolean;
151
+ position?: GoabPopoverPosition;
152
+ relative?: boolean;
153
+ }
154
+ export type GoabNotificationType = "important" | "information" | "event" | "emergency";
155
+ export type GoabAriaLiveType = "polite" | "assertive" | "off";
156
+ export type GoabServiceLevel = "alpha" | "beta" | "live";
157
+ export type GoabLinkTarget = "self" | "blank";
158
+ export type GoabModalRole = "dialog" | "alertdialog";
159
+ export type GoabModalTransition = "fast" | "slow" | "none";
160
+ export type GoabModalCalloutVariant = "information" | "important" | "emergency" | "success" | "event";
161
+ export type GoabDate = Date | string;
162
+ export type GoabInputType = "text" | "password" | "email" | "number" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
163
+ export type GoabAutoCapitalize = "on" | "off" | "none" | "sentences" | "words" | "characters";
164
+ export type OnChange<T = string> = (name: string, value: T) => void;
165
+ export type OnFocus<T = string> = (name: string, value: T) => void;
166
+ export type OnBlur<T = string> = (name: string, value: T) => void;
167
+ export type OnKeyPress<T = string> = (name: string, value: T, key: string) => void;
168
+ export interface GoabInputProps extends BaseProps {
169
+ onChange: OnChange<string>;
170
+ value?: string;
171
+ min?: number | string;
172
+ max?: number | string;
173
+ step?: number;
174
+ onFocus?: OnFocus<string>;
175
+ onBlur?: OnBlur<string>;
176
+ onKeyPress?: OnKeyPress<string>;
177
+ }
178
+ export interface GoabNumberInputProps extends BaseProps {
179
+ onChange: OnChange<number>;
180
+ value?: number;
181
+ min?: number;
182
+ max?: number;
183
+ step?: number;
184
+ onFocus?: OnFocus<number>;
185
+ onBlur?: OnBlur<number>;
186
+ onKeyPress?: OnKeyPress<number>;
187
+ }
188
+ export interface GoabDateInputProps extends BaseProps {
189
+ onChange: OnChange<GoabDate>;
190
+ value?: GoabDate;
191
+ min?: GoabDate;
192
+ max?: GoabDate;
193
+ step?: number;
194
+ onFocus?: OnFocus<GoabDate>;
195
+ onBlur?: OnBlur<GoabDate>;
196
+ onKeyPress?: OnKeyPress<GoabDate>;
197
+ }
198
+ interface BaseProps extends Margins {
199
+ name: string;
200
+ id?: string;
201
+ debounce?: number;
202
+ disabled?: boolean;
203
+ autoCapitalize?: GoabAutoCapitalize;
204
+ placeholder?: string;
205
+ leadingIcon?: GoabIconType;
206
+ trailingIcon?: GoabIconType;
207
+ onTrailingIconClick?: () => void;
208
+ variant?: "goa" | "bare";
209
+ focused?: boolean;
210
+ readonly?: boolean;
211
+ error?: boolean;
212
+ width?: string;
213
+ prefix?: string;
214
+ suffix?: string;
215
+ testId?: string;
216
+ ariaLabel?: string;
217
+ maxLength?: number;
218
+ }
219
+ export type GoabIconFilledType = `${GoabIconType}-${GoabIconTheme}`;
220
+ export type GoabIconType = "accessibility" | "add-circle" | "add" | "airplane" | "alarm" | "albums" | "alert-circle" | "alert" | "american-football" | "analytics" | "aperture" | "apps" | "archive" | "arrow-back-circle" | "arrow-back" | "arrow-down-circle" | "arrow-down" | "arrow-forward-circle" | "arrow-forward" | "arrow-redo-circle" | "arrow-redo" | "arrow-undo-circle" | "arrow-undo" | "arrow-up-circle" | "arrow-up" | "at-circle" | "at" | "attach" | "backspace" | "bag-add" | "bag-check" | "bag-handle" | "bag" | "bag-remove" | "balloon" | "ban" | "bandage" | "bar-chart" | "barbell" | "barcode" | "baseball" | "basket" | "basketball" | "battery-charging" | "battery-dead" | "battery-full" | "battery-half" | "beaker" | "bed" | "beer" | "bicycle" | "bluetooth" | "boat" | "body" | "bonfire" | "book" | "bookmark" | "bookmarks" | "bowling-ball" | "briefcase" | "browsers" | "brush" | "bug" | "build" | "bulb" | "bus" | "business" | "cafe" | "calculator" | "calendar-clear" | "calendar-number" | "calendar" | "call" | "camera" | "camera-reverse" | "car" | "car-sport" | "card" | "caret-back-circle" | "caret-back" | "caret-down-circle" | "caret-down" | "caret-forward-circle" | "caret-forward" | "caret-up-circle" | "caret-up" | "cart" | "cash" | "cellular" | "chatbox-ellipses" | "chatbox" | "chatbubble-ellipses" | "chatbubble" | "chatbubbles" | "checkbox" | "checkmark-circle" | "checkmark-done-circle" | "checkmark-done" | "checkmark" | "chevron-back-circle" | "chevron-back" | "chevron-down-circle" | "chevron-down" | "chevron-forward-circle" | "chevron-forward" | "chevron-up-circle" | "chevron-up" | "clipboard" | "close-circle" | "close" | "cloud-circle" | "cloud-done" | "cloud-download" | "cloud-offline" | "cloud" | "cloud-upload" | "cloudy-night" | "cloudy" | "code-download" | "code" | "code-slash" | "code-working" | "cog" | "color-fill" | "color-filter" | "color-palette" | "color-wand" | "compass" | "construct" | "contract" | "contrast" | "copy" | "create" | "crop" | "cube" | "cut" | "desktop" | "diamond" | "dice" | "disc" | "document-attach" | "document-lock" | "document" | "document-text" | "documents" | "download" | "duplicate" | "ear" | "earth" | "easel" | "egg" | "ellipse" | "ellipsis-horizontal-circle" | "ellipsis-horizontal" | "ellipsis-vertical-circle" | "ellipsis-vertical" | "enter" | "exit" | "expand" | "extension-puzzle" | "eye-off" | "eye" | "eyedrop" | "fast-food" | "female" | "file-tray-full" | "file-tray" | "file-tray-stacked" | "filenames.ps1" | "film" | "filter-circle" | "filter" | "finger-print" | "fish" | "fitness" | "flag" | "flame" | "flash-off" | "flash" | "flashlight" | "flask" | "flower" | "folder-open" | "folder" | "football" | "footsteps" | "funnel" | "game-controller" | "gift" | "git-branch" | "git-commit" | "git-compare" | "git-merge" | "git-network" | "git-pull-request" | "glasses" | "globe" | "golf" | "grid" | "hammer" | "hand-left" | "hand-right" | "happy" | "hardware-chip" | "headset" | "heart-circle" | "heart-dislike-circle" | "heart-dislike" | "heart-half" | "heart" | "help-buoy" | "help-circle" | "help" | "home" | "hourglass" | "ice-cream" | "id-card" | "image" | "images" | "infinite" | "information-circle" | "information" | "invert-mode" | "journal" | "key" | "keypad" | "language" | "laptop" | "layers" | "leaf" | "library" | "link" | "list-circle" | "list" | "locate" | "location" | "lock-closed" | "lock-open" | "log-in" | "log-out" | "magnet" | "mail-open" | "mail" | "mail-unread" | "male-female" | "male" | "man" | "map" | "medal" | "medical" | "medkit" | "megaphone" | "menu" | "mic-circle" | "mic-off-circle" | "mic-off" | "mic" | "moon" | "move" | "musical-note" | "musical-notes" | "navigate-circle" | "navigate" | "newspaper" | "notifications-circle" | "notifications-off-circle" | "notifications-off" | "notifications" | "nuclear" | "nutrition" | "open" | "options" | "paper-plane" | "partly-sunny" | "pause-circle" | "pause" | "paw" | "pencil" | "people-circle" | "people" | "person-add" | "person-circle" | "person" | "person-remove" | "phone-landscape" | "phone-portrait" | "pie-chart" | "pin" | "pint" | "pizza" | "planet" | "play-back-circle" | "play-back" | "play-circle" | "play-forward-circle" | "play-forward" | "play" | "play-skip-back-circle" | "play-skip-back" | "play-skip-forward-circle" | "play-skip-forward" | "podium" | "power" | "pricetag" | "pricetags" | "print" | "prism" | "pulse" | "push" | "qr-code" | "radio-button-off" | "radio-button-on" | "radio" | "rainy" | "reader" | "receipt" | "recording" | "refresh-circle" | "refresh" | "reload-circle" | "reload" | "remove-circle" | "remove" | "reorder-four" | "reorder-three" | "reorder-two" | "repeat" | "resize" | "restaurant" | "return-down-back" | "return-down-forward" | "return-up-back" | "return-up-forward" | "ribbon" | "rocket" | "rose" | "sad" | "save" | "scale" | "scan-circle" | "scan" | "school" | "search-circle" | "search" | "send" | "server" | "settings" | "shapes" | "share" | "share-social" | "shield-checkmark" | "shield-half" | "shield" | "shirt" | "shuffle" | "skull" | "snow" | "sparkles" | "speedometer" | "square" | "star-half" | "star" | "stats-chart" | "stop-circle" | "stop" | "stopwatch" | "storefront" | "subway" | "sunny" | "swap-horizontal" | "swap-vertical" | "sync-circle" | "sync" | "tablet-landscape" | "tablet-portrait" | "telescope" | "tennisball" | "terminal" | "text" | "thermometer" | "thumbs-down" | "thumbs-up" | "thunderstorm" | "ticket" | "time" | "timer" | "today" | "toggle" | "trail-sign" | "train" | "transgender" | "trash-bin" | "trash" | "trending-down" | "trending-up" | "triangle" | "trophy" | "tv" | "umbrella" | "unlink" | "videocam-off" | "videocam" | "volume-high" | "volume-low" | "volume-medium" | "volume-mute" | "volume-off" | "walk" | "wallet" | "warning" | "watch" | "water" | "wifi" | "wine" | "woman" | "logo-alipay" | "logo-amazon" | "logo-amplify" | "logo-android" | "logo-angular" | "logo-apple" | "logo-apple-appstore" | "logo-apple-ar" | "logo-behance" | "logo-bitbucket" | "logo-bitcoin" | "logo-buffer" | "logo-capacitor" | "logo-chrome" | "logo-closed-captioning" | "logo-codepen" | "logo-css3" | "logo-designernews" | "logo-deviantart" | "logo-discord" | "logo-docker" | "logo-dribbble" | "logo-dropbox" | "logo-edge" | "logo-electron" | "logo-euro" | "logo-facebook" | "logo-figma" | "logo-firebase" | "logo-firefox" | "logo-flickr" | "logo-foursquare" | "logo-github" | "logo-gitlab" | "logo-google" | "logo-google-playstore" | "logo-hackernews" | "logo-html5" | "logo-instagram" | "logo-ionic" | "logo-ionitron" | "logo-javascript" | "logo-laravel" | "logo-linkedin" | "logo-markdown" | "logo-mastodon" | "logo-medium" | "logo-microsoft" | "logo-no-smoking" | "logo-nodejs" | "logo-npm" | "logo-octocat" | "logo-paypal" | "logo-pinterest" | "logo-playstation" | "logo-pwa" | "logo-python" | "logo-react" | "logo-reddit" | "logo-rss" | "logo-sass" | "logo-skype" | "logo-slack" | "logo-snapchat" | "logo-soundcloud" | "logo-stackoverflow" | "logo-steam" | "logo-stencil" | "logo-tableau" | "logo-tiktok" | "logo-tumblr" | "logo-tux" | "logo-twitch" | "logo-twitter" | "logo-usd" | "logo-venmo" | "logo-vercel" | "logo-vimeo" | "logo-vk" | "logo-vue" | "logo-web-component" | "logo-wechat" | "logo-whatsapp" | "logo-windows" | "logo-wordpress" | "logo-xbox" | "logo-xing" | "logo-yahoo" | "logo-yen" | "logo-youtube";
221
+ export type GoabIconSize = "small" | "medium" | "large" | "xlarge";
222
+ export type GoabIconTheme = "outline" | "filled";
223
+ export type GoabIconButtonVariant = "color" | "nocolor" | "dark" | "destructive";
224
+ export type GoabIconVariant = "primary" | "secondary" | "tertiary";
225
+ export type NumericSpacing = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
226
+ export type TShirtSpacing = "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl";
227
+ export type Spacing = NumericSpacing | TShirtSpacing | null;
228
+ export interface Margins {
229
+ mt?: Spacing;
230
+ mr?: Spacing;
231
+ mb?: Spacing;
232
+ ml?: Spacing;
233
+ }
234
+ export type GoabBlockDirection = "row" | "column";
235
+ export type GoabBlockAlignment = "center" | "start" | "end";
236
+ export type GoabLinkButtonType = "start" | "primary" | "secondary" | "tertiary";
237
+ export type GoabTextMaxWidth = string | "none";
238
+ export type GoabTextHeadingElement = "h1" | "h2" | "h3" | "h4" | "h5";
239
+ export type GoabTextTextElement = "span" | "div" | "p";
240
+ export type GoabTextHeadingSize = "heading-xl" | "heading-l" | "heading-m" | "heading-s" | "heading-xs";
241
+ export type GoabTextBodySize = "body-l" | "body-m" | "body-s" | "body-xs";
242
+ export type GoabTextSize = GoabTextHeadingSize | GoabTextBodySize;
243
+ export type GoabFielsetOnContinueDetail = {
244
+ el: HTMLElement;
245
+ state: Record<string, string>;
246
+ };
247
+ export type GoabFormField = {
248
+ label: string;
249
+ value: string;
250
+ };
251
+ export type GoabFormState = {
252
+ form: Record<string, Record<string, GoabFormField>>;
253
+ history: string[];
254
+ editting: string;
255
+ lastModified?: Date;
256
+ };
257
+ export type GoabFormStorageType = "none" | "local" | "session";
258
+ export type GoabFormOnMountDetail = {
259
+ fn: (next: string) => void;
260
+ };
261
+ export type GoabFormOnStateChange = {
262
+ id: string;
263
+ state: Record<string, Record<string, GoabFormField>>;
264
+ };
265
+ export {};
package/package.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "name": "@abgov/ui-components-common",
3
+ "version": "1.0.0-alpha.4",
4
+ "bugs": {
5
+ "url": "https://github.com/GovAlta/ui-components/issues"
6
+ },
7
+ "keywords": [
8
+ "Goab",
9
+ "ui-components",
10
+ "common"
11
+ ],
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "https://github.com/GovAlta/ui-components.git",
15
+ "directory": "libs/common"
16
+ },
17
+ "license": "Apache-2.0",
18
+ "description": "Government of Alberta - UI Web components",
19
+ "type": "module",
20
+ "main": "./index.js",
21
+ "module": "./index.js",
22
+ "publishConfig": {
23
+ "access": "public"
24
+ }
25
+ }