@windstream/react-shared-components 0.0.94 → 0.0.96

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.
Files changed (147) hide show
  1. package/README.md +635 -635
  2. package/dist/contentful/index.d.ts +11 -0
  3. package/dist/contentful/index.esm.js +1 -1
  4. package/dist/contentful/index.esm.js.map +1 -1
  5. package/dist/contentful/index.js +1 -1
  6. package/dist/contentful/index.js.map +1 -1
  7. package/dist/core.d.ts +8 -1
  8. package/dist/index.d.ts +8 -1
  9. package/dist/index.esm.js +1 -1
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +177 -177
  15. package/src/components/accordion/Accordion.stories.tsx +230 -230
  16. package/src/components/accordion/types.ts +11 -11
  17. package/src/components/alert-card/AlertCard.stories.tsx +171 -171
  18. package/src/components/alert-card/index.tsx +38 -33
  19. package/src/components/alert-card/types.ts +12 -11
  20. package/src/components/brand-button/BrandButton.stories.tsx +223 -223
  21. package/src/components/brand-button/helpers.ts +35 -35
  22. package/src/components/brand-button/index.tsx +115 -115
  23. package/src/components/brand-button/types.ts +37 -37
  24. package/src/components/button/Button.stories.tsx +108 -108
  25. package/src/components/button/index.tsx +27 -27
  26. package/src/components/button/types.ts +14 -14
  27. package/src/components/call-button/CallButton.stories.tsx +324 -324
  28. package/src/components/call-button/index.tsx +86 -86
  29. package/src/components/call-button/types.ts +11 -11
  30. package/src/components/checkbox/Checkbox.stories.tsx +247 -247
  31. package/src/components/checkbox/index.tsx +197 -197
  32. package/src/components/checkbox/types.ts +27 -27
  33. package/src/components/checklist/Checklist.stories.tsx +150 -150
  34. package/src/components/checklist/index.tsx +55 -55
  35. package/src/components/checklist/types.ts +14 -14
  36. package/src/components/collapse/Collapse.stories.tsx +255 -255
  37. package/src/components/collapse/index.tsx +46 -46
  38. package/src/components/collapse/types.ts +6 -6
  39. package/src/components/divider/Divider.stories.tsx +205 -205
  40. package/src/components/divider/index.tsx +22 -22
  41. package/src/components/divider/type.ts +3 -3
  42. package/src/components/image/Image.stories.tsx +113 -113
  43. package/src/components/image/index.tsx +25 -25
  44. package/src/components/image/types.ts +40 -40
  45. package/src/components/input/Input.stories.tsx +325 -325
  46. package/src/components/input/index.tsx +177 -177
  47. package/src/components/input/types.ts +37 -37
  48. package/src/components/link/Link.stories.tsx +163 -163
  49. package/src/components/link/types.ts +25 -25
  50. package/src/components/list/List.stories.tsx +272 -272
  51. package/src/components/list/index.tsx +88 -88
  52. package/src/components/list/list-item/index.tsx +38 -38
  53. package/src/components/list/list-item/types.ts +13 -13
  54. package/src/components/list/types.ts +29 -29
  55. package/src/components/material-icon/MaterialIcon.stories.tsx +322 -322
  56. package/src/components/material-icon/constants.ts +98 -98
  57. package/src/components/material-icon/index.tsx +47 -47
  58. package/src/components/material-icon/types.ts +31 -31
  59. package/src/components/modal/Modal.stories.tsx +171 -171
  60. package/src/components/modal/index.tsx +164 -164
  61. package/src/components/modal/types.ts +24 -24
  62. package/src/components/next-image/index.tsx +32 -32
  63. package/src/components/next-image/types.ts +1 -1
  64. package/src/components/radio-button/RadioButton.stories.tsx +307 -307
  65. package/src/components/radio-button/index.tsx +75 -75
  66. package/src/components/radio-button/types.ts +21 -21
  67. package/src/components/see-more/SeeMore.stories.tsx +181 -181
  68. package/src/components/see-more/index.tsx +44 -44
  69. package/src/components/see-more/types.ts +4 -4
  70. package/src/components/select/Select.stories.tsx +411 -411
  71. package/src/components/select/index.tsx +150 -150
  72. package/src/components/select/types.ts +35 -35
  73. package/src/components/select-plan-button/SelectPlanButton.stories.tsx +184 -184
  74. package/src/components/select-plan-button/index.tsx +57 -31
  75. package/src/components/select-plan-button/types.ts +14 -5
  76. package/src/components/skeleton/Skeleton.stories.tsx +179 -179
  77. package/src/components/skeleton/index.tsx +61 -61
  78. package/src/components/skeleton/types.ts +4 -4
  79. package/src/components/spinner/Spinner.stories.tsx +335 -335
  80. package/src/components/spinner/index.tsx +44 -44
  81. package/src/components/spinner/types.ts +5 -5
  82. package/src/components/text/Text.stories.tsx +321 -321
  83. package/src/components/text/index.tsx +25 -25
  84. package/src/components/text/types.ts +45 -45
  85. package/src/components/tooltip/Tooltip.stories.tsx +219 -219
  86. package/src/components/tooltip/index.tsx +74 -74
  87. package/src/components/tooltip/types.ts +7 -7
  88. package/src/components/view-cart-button/ViewCartButton.stories.tsx +252 -252
  89. package/src/components/view-cart-button/index.tsx +42 -42
  90. package/src/components/view-cart-button/types.ts +5 -5
  91. package/src/contentful/blocks/button/Button.stories.tsx +40 -40
  92. package/src/contentful/blocks/button/index.tsx +31 -25
  93. package/src/contentful/blocks/button/types.ts +34 -32
  94. package/src/contentful/blocks/callout/Callout.stories.tsx +23 -23
  95. package/src/contentful/blocks/callout/index.tsx +66 -66
  96. package/src/contentful/blocks/cards/Cards.stories.tsx +23 -23
  97. package/src/contentful/blocks/cards/index.tsx +13 -13
  98. package/src/contentful/blocks/cards/product-card/index.tsx +206 -199
  99. package/src/contentful/blocks/cards/product-card/types.ts +28 -21
  100. package/src/contentful/blocks/cards/testimonial-card/index.tsx +88 -88
  101. package/src/contentful/blocks/cards/testimonial-card/types.tsx +12 -12
  102. package/src/contentful/blocks/cards/types.ts +1 -1
  103. package/src/contentful/blocks/carousel/Carousel.stories.tsx +23 -23
  104. package/src/contentful/blocks/carousel/helper.tsx +356 -348
  105. package/src/contentful/blocks/carousel/index.tsx +74 -68
  106. package/src/contentful/blocks/carousel/types.ts +143 -139
  107. package/src/contentful/blocks/cta-callout/CtaCallout.stories.tsx +46 -46
  108. package/src/contentful/blocks/cta-callout/index.tsx +60 -54
  109. package/src/contentful/blocks/cta-callout/types.ts +26 -22
  110. package/src/contentful/blocks/find-kinetic/index.tsx +124 -124
  111. package/src/contentful/blocks/floating-banner/FloatingBanner.stories.tsx +34 -34
  112. package/src/contentful/blocks/floating-banner/types.ts +22 -22
  113. package/src/contentful/blocks/footer/Footer.stories.tsx +30 -30
  114. package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx +23 -23
  115. package/src/contentful/blocks/image-promo-bar/helper.tsx +28 -28
  116. package/src/contentful/blocks/image-promo-bar/index.tsx +234 -231
  117. package/src/contentful/blocks/image-promo-bar/types.ts +44 -44
  118. package/src/contentful/blocks/image-promo-bar/vimeo-embed.tsx +93 -93
  119. package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx +46 -46
  120. package/src/contentful/blocks/modal/constants.ts +53 -53
  121. package/src/contentful/blocks/modal/index.tsx +91 -91
  122. package/src/contentful/blocks/modal/types.ts +12 -12
  123. package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.tsx +111 -111
  124. package/src/contentful/blocks/navigation/index.tsx +385 -385
  125. package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.tsx +80 -80
  126. package/src/contentful/blocks/navigation/types.ts +41 -41
  127. package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx +23 -23
  128. package/src/contentful/blocks/primary-hero/index.tsx +229 -228
  129. package/src/contentful/blocks/primary-hero/types.ts +35 -35
  130. package/src/contentful/blocks/shape-background-wrapper/ShapeBackgroundWrapper.stories.tsx +26 -26
  131. package/src/contentful/blocks/shape-background-wrapper/index.tsx +124 -124
  132. package/src/contentful/blocks/shape-background-wrapper/types.ts +36 -36
  133. package/src/contentful/blocks/text/Text.stories.tsx +23 -23
  134. package/src/contentful/blocks/text/index.tsx +12 -12
  135. package/src/contentful/blocks/text/types.ts +1 -1
  136. package/src/contentful/index.ts +57 -57
  137. package/src/hooks/use-body-scroll-lock.ts +34 -34
  138. package/src/hooks/use-outside-click.ts +17 -17
  139. package/src/index.ts +96 -96
  140. package/src/next/index.ts +5 -5
  141. package/src/setupTests.ts +46 -46
  142. package/src/stories/DocsTemplate.tsx +24 -24
  143. package/src/styles/globals.css +343 -343
  144. package/src/types/global.d.ts +9 -9
  145. package/src/types/micro-components.ts +99 -89
  146. package/src/utils/index.ts +49 -49
  147. package/tailwind.config.cjs +4 -0
@@ -1,98 +1,98 @@
1
- //If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
2
- export const iconNameList = [
3
- "info",
4
- "download",
5
- "featured_seasonal_and_gifts",
6
- "visibility",
7
- "paid",
8
- "check_box",
9
- "check_box_outline_blank",
10
- "radio_button_unchecked",
11
- "radio_button_checked",
12
- "counter_1",
13
- "counter_2",
14
- "counter_3",
15
- "error",
16
- "search",
17
- "cancel",
18
- "router",
19
- "broadcast_on_home",
20
- "check",
21
- "check_circle",
22
- "lock",
23
- "shield_lock",
24
- "phone_in_talk",
25
- "call",
26
- "chevron_left",
27
- "chevron_right",
28
- "keyboard_arrow_down",
29
- "keyboard_arrow_up",
30
- "arrow_back",
31
- "arrow_forward",
32
- "help",
33
- "home_pin",
34
- "location_on",
35
- "timer",
36
- "schedule",
37
- "add",
38
- "remove",
39
- "bolt",
40
- "rocket",
41
- "cloud_sync",
42
- "close",
43
- "groups",
44
- "speed",
45
- "mail",
46
- "credit_card",
47
- "language",
48
- "forum",
49
- "contract",
50
- "local_atm",
51
- "headset_mic",
52
- "sensors",
53
- "wifi",
54
- "settings",
55
- "home",
56
- "devices",
57
- "build",
58
- "thumb_up",
59
- "desktop_windows",
60
- "block",
61
- "all_inclusive",
62
- "verified_user",
63
- "extension",
64
- "stadia_controller",
65
- "visibility_off",
66
- "close_fullscreen",
67
- "progress_activity",
68
- "travel_explore",
69
- "share",
70
- "business_center",
71
- "upload",
72
- "videocam",
73
- "expand_circle_right",
74
- "add_circle",
75
- "do_not_disturb_on",
76
- "expand_circle_up",
77
- "expand_circle_down",
78
- "replay",
79
- "fiber_manual_record",
80
- "menu",
81
- "dangerous",
82
- "star",
83
- "play_arrow",
84
- "calendar_clock",
85
- ] as const;
86
-
87
- export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
88
- export const weights = [
89
- "100",
90
- "200",
91
- "300",
92
- "400",
93
- "500",
94
- "600",
95
- "700",
96
- ] as const;
97
- export const emphasis = [-25, 0, 200] as const;
98
- export const sizes = [20, 24, 32, 40, 48, 52] as const;
1
+ //If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
2
+ export const iconNameList = [
3
+ "info",
4
+ "download",
5
+ "featured_seasonal_and_gifts",
6
+ "visibility",
7
+ "paid",
8
+ "check_box",
9
+ "check_box_outline_blank",
10
+ "radio_button_unchecked",
11
+ "radio_button_checked",
12
+ "counter_1",
13
+ "counter_2",
14
+ "counter_3",
15
+ "error",
16
+ "search",
17
+ "cancel",
18
+ "router",
19
+ "broadcast_on_home",
20
+ "check",
21
+ "check_circle",
22
+ "lock",
23
+ "shield_lock",
24
+ "phone_in_talk",
25
+ "call",
26
+ "chevron_left",
27
+ "chevron_right",
28
+ "keyboard_arrow_down",
29
+ "keyboard_arrow_up",
30
+ "arrow_back",
31
+ "arrow_forward",
32
+ "help",
33
+ "home_pin",
34
+ "location_on",
35
+ "timer",
36
+ "schedule",
37
+ "add",
38
+ "remove",
39
+ "bolt",
40
+ "rocket",
41
+ "cloud_sync",
42
+ "close",
43
+ "groups",
44
+ "speed",
45
+ "mail",
46
+ "credit_card",
47
+ "language",
48
+ "forum",
49
+ "contract",
50
+ "local_atm",
51
+ "headset_mic",
52
+ "sensors",
53
+ "wifi",
54
+ "settings",
55
+ "home",
56
+ "devices",
57
+ "build",
58
+ "thumb_up",
59
+ "desktop_windows",
60
+ "block",
61
+ "all_inclusive",
62
+ "verified_user",
63
+ "extension",
64
+ "stadia_controller",
65
+ "visibility_off",
66
+ "close_fullscreen",
67
+ "progress_activity",
68
+ "travel_explore",
69
+ "share",
70
+ "business_center",
71
+ "upload",
72
+ "videocam",
73
+ "expand_circle_right",
74
+ "add_circle",
75
+ "do_not_disturb_on",
76
+ "expand_circle_up",
77
+ "expand_circle_down",
78
+ "replay",
79
+ "fiber_manual_record",
80
+ "menu",
81
+ "dangerous",
82
+ "star",
83
+ "play_arrow",
84
+ "calendar_clock",
85
+ ] as const;
86
+
87
+ export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
88
+ export const weights = [
89
+ "100",
90
+ "200",
91
+ "300",
92
+ "400",
93
+ "500",
94
+ "600",
95
+ "700",
96
+ ] as const;
97
+ export const emphasis = [-25, 0, 200] as const;
98
+ export const sizes = [20, 24, 32, 40, 48, 52] as const;
@@ -1,47 +1,47 @@
1
- import React from "react";
2
- import { cx } from "../../utils";
3
- import type { IconProps } from "./types";
4
-
5
- const MaterialIcon: React.FC<IconProps> = ({
6
- name,
7
- fill = 0,
8
- opticalSize = "48dp",
9
- weight = "200",
10
- emphasis = 145,
11
- size = 24,
12
- color = "currentColor",
13
- style = {},
14
- className,
15
- onClick,
16
- dataTestId,
17
- }) => {
18
- const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
19
-
20
- const combinedStyle: React.CSSProperties = {
21
- fontVariationSettings,
22
- fontSize: `${size}px`,
23
- fontFamily: "'Material Symbols Rounded'",
24
- color: color || "currentColor",
25
- ...style,
26
- };
27
-
28
- return (
29
- <span
30
- style={combinedStyle}
31
- className={cx(
32
- "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
33
- className
34
- )}
35
- onClick={onClick}
36
- data-testid={dataTestId}
37
- >
38
- {name}
39
- </span>
40
- );
41
- };
42
-
43
- export { MaterialIcon };
44
-
45
- MaterialIcon.displayName = "MaterialIcon";
46
-
47
- export type { IconProps, IconName } from "./types";
1
+ import React from "react";
2
+ import { cx } from "../../utils";
3
+ import type { IconProps } from "./types";
4
+
5
+ const MaterialIcon: React.FC<IconProps> = ({
6
+ name,
7
+ fill = 0,
8
+ opticalSize = "48dp",
9
+ weight = "200",
10
+ emphasis = 145,
11
+ size = 24,
12
+ color = "currentColor",
13
+ style = {},
14
+ className,
15
+ onClick,
16
+ dataTestId,
17
+ }) => {
18
+ const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
19
+
20
+ const combinedStyle: React.CSSProperties = {
21
+ fontVariationSettings,
22
+ fontSize: `${size}px`,
23
+ fontFamily: "'Material Symbols Rounded'",
24
+ color: color || "currentColor",
25
+ ...style,
26
+ };
27
+
28
+ return (
29
+ <span
30
+ style={combinedStyle}
31
+ className={cx(
32
+ "material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
33
+ className
34
+ )}
35
+ onClick={onClick}
36
+ data-testid={dataTestId}
37
+ >
38
+ {name}
39
+ </span>
40
+ );
41
+ };
42
+
43
+ export { MaterialIcon };
44
+
45
+ MaterialIcon.displayName = "MaterialIcon";
46
+
47
+ export type { IconProps, IconName } from "./types";
@@ -1,31 +1,31 @@
1
- import type { CSSProperties } from "react";
2
- import {
3
- emphasis,
4
- iconNameList,
5
- OpticalSizes,
6
- sizes,
7
- weights,
8
- } from "./constants";
9
-
10
- export type Fill = 1 | 0;
11
-
12
- export type IconName = (typeof iconNameList)[number];
13
-
14
- export type OpticalSize = (typeof OpticalSizes)[number];
15
- export type Weight = (typeof weights)[number];
16
- export type Emphasis = (typeof emphasis)[number];
17
- export type Size = (typeof sizes)[number];
18
-
19
- export type IconProps = {
20
- name: IconName;
21
- fill?: Fill;
22
- opticalSize?: OpticalSize;
23
- weight?: Weight;
24
- emphasis?: Emphasis;
25
- size?: Size;
26
- color?: string;
27
- style?: CSSProperties;
28
- className?: string;
29
- onClick?: () => void;
30
- dataTestId?: string;
31
- };
1
+ import type { CSSProperties } from "react";
2
+ import {
3
+ emphasis,
4
+ iconNameList,
5
+ OpticalSizes,
6
+ sizes,
7
+ weights,
8
+ } from "./constants";
9
+
10
+ export type Fill = 1 | 0;
11
+
12
+ export type IconName = (typeof iconNameList)[number];
13
+
14
+ export type OpticalSize = (typeof OpticalSizes)[number];
15
+ export type Weight = (typeof weights)[number];
16
+ export type Emphasis = (typeof emphasis)[number];
17
+ export type Size = (typeof sizes)[number];
18
+
19
+ export type IconProps = {
20
+ name: IconName;
21
+ fill?: Fill;
22
+ opticalSize?: OpticalSize;
23
+ weight?: Weight;
24
+ emphasis?: Emphasis;
25
+ size?: Size;
26
+ color?: string;
27
+ style?: CSSProperties;
28
+ className?: string;
29
+ onClick?: () => void;
30
+ dataTestId?: string;
31
+ };