@razorpay/blade 1.0.0 → 3.1.4-npm-publish-test.2

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 (129) hide show
  1. package/CHANGELOG.md +804 -0
  2. package/build/components/index.d.ts +1943 -0
  3. package/build/components/index.native.d.ts +1931 -0
  4. package/build/components/index.native.js +3477 -0
  5. package/build/components/index.native.js.map +1 -0
  6. package/build/components/index.web.js +10103 -0
  7. package/build/components/index.web.js.map +1 -0
  8. package/build/css/bankingThemeDarkDesktop.css +572 -0
  9. package/build/css/bankingThemeDarkMobile.css +572 -0
  10. package/build/css/bankingThemeLightDesktop.css +572 -0
  11. package/build/css/bankingThemeLightMobile.css +572 -0
  12. package/build/css/paymentThemeDarkDesktop.css +572 -0
  13. package/build/css/paymentThemeDarkMobile.css +572 -0
  14. package/build/css/paymentThemeLightDesktop.css +572 -0
  15. package/build/css/paymentThemeLightMobile.css +572 -0
  16. package/build/tokens/index.d.ts +948 -0
  17. package/build/tokens/index.native.d.ts +948 -0
  18. package/build/tokens/index.native.js +4210 -0
  19. package/build/tokens/index.native.js.map +1 -0
  20. package/build/tokens/index.web.js +9117 -0
  21. package/build/tokens/index.web.js.map +1 -0
  22. package/build/utils/index.d.ts +427 -0
  23. package/build/utils/index.native.d.ts +426 -0
  24. package/build/utils/index.native.js +4555 -0
  25. package/build/utils/index.native.js.map +1 -0
  26. package/build/utils/index.web.js +5095 -0
  27. package/build/utils/index.web.js.map +1 -0
  28. package/components.d.ts +1 -0
  29. package/components.js +1 -0
  30. package/package.json +157 -108
  31. package/tokens.d.ts +1 -0
  32. package/tokens.js +1 -0
  33. package/utils.d.ts +1 -0
  34. package/utils.js +1 -0
  35. package/.babelrc.js +0 -56
  36. package/.eslintignore +0 -21
  37. package/.eslintrc.js +0 -28
  38. package/.prettierignore +0 -21
  39. package/.prettierrc.js +0 -12
  40. package/.stylelintrc.js +0 -4
  41. package/README.md +0 -3
  42. package/android/.watchmanconfig +0 -1
  43. package/android/app/_BUCK +0 -55
  44. package/android/app/build.gradle +0 -200
  45. package/android/app/build_defs.bzl +0 -19
  46. package/android/app/debug.keystore +0 -0
  47. package/android/app/proguard-rules.pro +0 -10
  48. package/android/app/src/debug/AndroidManifest.xml +0 -8
  49. package/android/app/src/main/AndroidManifest.xml +0 -26
  50. package/android/app/src/main/assets/fonts/Lato-Light.ttf +0 -0
  51. package/android/app/src/main/assets/fonts/Lato-Regular.ttf +0 -0
  52. package/android/app/src/main/assets/fonts/Lato_bold.ttf +0 -0
  53. package/android/app/src/main/java/com/blade/MainActivity.java +0 -15
  54. package/android/app/src/main/java/com/blade/MainApplication.java +0 -74
  55. package/android/app/src/main/res/mipmap-hdpi/ic_launcher.png +0 -0
  56. package/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png +0 -0
  57. package/android/app/src/main/res/mipmap-mdpi/ic_launcher.png +0 -0
  58. package/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png +0 -0
  59. package/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png +0 -0
  60. package/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png +0 -0
  61. package/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png +0 -0
  62. package/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png +0 -0
  63. package/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png +0 -0
  64. package/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png +0 -0
  65. package/android/app/src/main/res/values/strings.xml +0 -3
  66. package/android/app/src/main/res/values/styles.xml +0 -9
  67. package/android/build.gradle +0 -38
  68. package/android/gradle/wrapper/gradle-wrapper.jar +0 -0
  69. package/android/gradle/wrapper/gradle-wrapper.properties +0 -5
  70. package/android/gradle.properties +0 -21
  71. package/android/gradlew +0 -188
  72. package/android/gradlew.bat +0 -100
  73. package/android/settings.gradle +0 -3
  74. package/ios/Podfile +0 -43
  75. package/ios/Podfile.lock +0 -338
  76. package/ios/blade/AppDelegate.h +0 -15
  77. package/ios/blade/AppDelegate.m +0 -42
  78. package/ios/blade/Base.lproj/LaunchScreen.xib +0 -42
  79. package/ios/blade/Images.xcassets/AppIcon.appiconset/1024.png +0 -0
  80. package/ios/blade/Images.xcassets/AppIcon.appiconset/114.png +0 -0
  81. package/ios/blade/Images.xcassets/AppIcon.appiconset/120.png +0 -0
  82. package/ios/blade/Images.xcassets/AppIcon.appiconset/180.png +0 -0
  83. package/ios/blade/Images.xcassets/AppIcon.appiconset/29.png +0 -0
  84. package/ios/blade/Images.xcassets/AppIcon.appiconset/40.png +0 -0
  85. package/ios/blade/Images.xcassets/AppIcon.appiconset/57.png +0 -0
  86. package/ios/blade/Images.xcassets/AppIcon.appiconset/58.png +0 -0
  87. package/ios/blade/Images.xcassets/AppIcon.appiconset/60.png +0 -0
  88. package/ios/blade/Images.xcassets/AppIcon.appiconset/80.png +0 -0
  89. package/ios/blade/Images.xcassets/AppIcon.appiconset/87.png +0 -0
  90. package/ios/blade/Images.xcassets/AppIcon.appiconset/Contents.json +0 -100
  91. package/ios/blade/Images.xcassets/Contents.json +0 -6
  92. package/ios/blade/Info.plist +0 -65
  93. package/ios/blade/main.m +0 -16
  94. package/ios/blade.xcodeproj/project.pbxproj +0 -619
  95. package/ios/blade.xcodeproj/xcshareddata/xcschemes/blade.xcscheme +0 -129
  96. package/ios/blade.xcworkspace/contents.xcworkspacedata +0 -10
  97. package/ios/blade.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +0 -8
  98. package/ios/bladeTests/Info.plist +0 -24
  99. package/ios/bladeTests/bladeTests.m +0 -72
  100. package/jest-preprocess.js +0 -3
  101. package/jest.native.config.js +0 -24
  102. package/jest.web.config.js +0 -21
  103. package/metro.config.js +0 -11
  104. package/public/fonts/Lato-Bold.ttf +0 -0
  105. package/public/fonts/Lato-Light.ttf +0 -0
  106. package/public/fonts/Lato-Regular.ttf +0 -0
  107. package/react-native.config.js +0 -5
  108. package/src/atoms/Button/Button.native.js +0 -30
  109. package/src/atoms/Button/Button.stories.js +0 -11
  110. package/src/atoms/Button/Button.web.js +0 -20
  111. package/src/atoms/Button/__tests__/Button.native.test.js +0 -26
  112. package/src/atoms/Button/__tests__/Button.web.test.js +0 -19
  113. package/src/atoms/Button/__tests__/__snapshots__/Button.native.test.js.snap +0 -42
  114. package/src/atoms/Button/__tests__/__snapshots__/Button.web.test.js.snap +0 -11
  115. package/src/atoms/Button/index.js +0 -1
  116. package/src/scripts/build.js +0 -86
  117. package/src/setupTests.js +0 -5
  118. package/src/storybook.test.js +0 -2
  119. package/src/tokens/colors.js +0 -101
  120. package/src/tokens/fonts.js +0 -33
  121. package/src/tokens/index.js +0 -5
  122. package/src/tokens/spacings.js +0 -13
  123. package/storybook/native/main.js +0 -35
  124. package/storybook/native/rn-addons.js +0 -2
  125. package/storybook/web/main.js +0 -10
  126. package/storybook/web/manager.js +0 -12
  127. package/storybook/web/preview.js +0 -11
  128. package/storybook/web/webpack.config.js +0 -5
  129. package/tsconfig.json +0 -12
package/CHANGELOG.md ADDED
@@ -0,0 +1,804 @@
1
+ # @razorpay/blade
2
+
3
+ ## 3.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - f0b901d: chore: remove border from Badge component
8
+
9
+ ## 3.1.3
10
+
11
+ ### Patch Changes
12
+
13
+ - 2576ce3: fix(link): add type prop for button variant
14
+
15
+ ## 3.1.2
16
+
17
+ ### Patch Changes
18
+
19
+ - ba0c74d: fix: use the correct maxWidth for OTPInput
20
+
21
+ ## 3.1.1
22
+
23
+ ### Patch Changes
24
+
25
+ - aee7e57: feat(Icons): add MinusIcon
26
+
27
+ ## 3.1.0
28
+
29
+ ### Minor Changes
30
+
31
+ - c3d9d2f: feat: add OTPInput component
32
+
33
+ ## 3.0.0
34
+
35
+ ### Major Changes
36
+
37
+ - 3aebc58: feat(Typography): make `size` prop consistent for `Heading`, `Title`, and `Text`
38
+
39
+ > **Warning**
40
+ >
41
+ > Breaking Change!
42
+ > This is a breaking change for apps that are using `Title` or `Heading` component from blade. Rest of the apps can upgrade without any migrations.
43
+
44
+ #### Migration
45
+
46
+ _**Tip:** If you're using TypeScript, run `yarn tsc` and that should throw errors wherever a change is required._
47
+
48
+ 1. **`<Title />`:** Rename `variant` prop to `size` in Title
49
+
50
+ ```diff
51
+ - <Title variant="small">Some Title</Title>
52
+ + <Title size="small">Some Title</Title>
53
+ ```
54
+
55
+ 2. **`<Heading />`:** Rename `variant` prop to `size` if the value is `small`, `medium,` or `large`. No change is required on `variant="subheading"`.
56
+
57
+ ```diff
58
+ <Heading variant="subheading">Nothing changes here</Heading> // No change here
59
+
60
+ - <Heading variant="medium">Medium Heading</Heading>
61
+ + <Heading size="medium">Medium Heading</Heading>
62
+ ```
63
+
64
+ ##### Edge Cases
65
+
66
+ Make sure to follow migration on new component if `Title` or `Heading` from blade is overriden with styled-components.
67
+
68
+ ```diff
69
+ const MyTitle = styled(Title)`
70
+ // some styles
71
+ `
72
+
73
+ - <MyTitle variant="large" />
74
+ + <MyTitle size="large" />
75
+ ```
76
+
77
+ - e16c154: feat(PasswordInput)!: rename from `PasswordField` to `PasswordInput`
78
+
79
+ #### Migration
80
+
81
+ > **Warning**
82
+ >
83
+ > Breaking change!
84
+
85
+ Rename occurences of `PasswordField` to `PasswordInput`, no changes in the API.
86
+
87
+ ```diff
88
+ - PasswordField
89
+ + PasswordInput
90
+ ```
91
+
92
+ ### Minor Changes
93
+
94
+ - eeba339: feat(Code): add `<Code />` component :shipit:
95
+
96
+ ## 2.5.1
97
+
98
+ ### Patch Changes
99
+
100
+ - 0ce8390: fix(BaseInput): use cursor not-allowed for disabled inputs
101
+
102
+ ## 2.5.0
103
+
104
+ ### Minor Changes
105
+
106
+ - d0017cd: feat(PasswordField): add final export :tada:
107
+ - adds a new `PasswordField` component
108
+
109
+ ## 2.4.0
110
+
111
+ ### Minor Changes
112
+
113
+ - bf92637: feat(blade): Improve platform types with TS 4.7
114
+
115
+ ### Added support for platform dependant types
116
+
117
+ Migration Steps
118
+
119
+ 1. Upgrade to TypeScript 4.7+
120
+ 2. In `tsconfig.json` add `moduleSuffix: ['.web', '']` or `moduleSuffix: ['.native', '']` (depending on the platform)
121
+
122
+ ```js
123
+ {
124
+ "compilerOptions": {
125
+ // For react-native use `.native`
126
+ // For web use `.web` extension
127
+ "moduleSuffixes": [".web", ""]
128
+ }
129
+ }
130
+ ```
131
+
132
+ > **Note**:
133
+ > if you are on <TS 4.7 or don't specify the `moduleSuffixes` blade will fallback to resolving `web` types
134
+
135
+ ## 2.3.0
136
+
137
+ ### Minor Changes
138
+
139
+ - 887cd11: feat(blade): added TextArea component
140
+
141
+ ## 2.2.2
142
+
143
+ ### Patch Changes
144
+
145
+ - a8c5c08: tests: add tests for `TextInput`
146
+ fix: render clear button on mount when the `defaultValue` or `value` is passed
147
+
148
+ ## 2.2.1
149
+
150
+ ### Patch Changes
151
+
152
+ - 4b6bfda: fix: update spinner easing
153
+
154
+ ## 2.2.0
155
+
156
+ ### Minor Changes
157
+
158
+ - 7c272be: feat: add `Spinner` component
159
+ - Also adds an internal `BaseSpinner` component
160
+
161
+ ## 2.1.0
162
+
163
+ ### Minor Changes
164
+
165
+ - a6bf780: feat(TextInput): add TextInput Field
166
+
167
+ ### This release publishes **`TextField`** Input
168
+
169
+ #### [Figma Link](https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A210737)
170
+
171
+ #### Capabilities
172
+
173
+ - Support for various `type` of TextInput i.e `'text' | 'telephone' | 'email' | 'url' | 'numeric' | 'search'`
174
+ - Automatically decide `keyboardType`, `keyboardReturnKeyType`, `autoCompleteSuggestionType` based on `type` attribute alone
175
+
176
+ ![image](https://user-images.githubusercontent.com/11384858/188391913-d45e40b4-1b92-4fab-8bf8-8d49891929f8.png)
177
+
178
+ - Max characters to be accepted by the input field which will in turn also render a counter
179
+ ![image](https://user-images.githubusercontent.com/11384858/188390436-2854807d-5fb0-42de-8171-3ba61be4b9f6.png)
180
+
181
+ - Clear the content of the input field with the help of a clear button
182
+ ![image](https://user-images.githubusercontent.com/11384858/188391183-8e262200-7424-4a80-a5fe-1c7166be26ce.png)
183
+
184
+ - Attach `prefix` and `suffix` to the input field
185
+ - Fully Accessible
186
+
187
+ ### Patch Changes
188
+
189
+ - a8c7620: ## Internal changes
190
+
191
+ tests(BaseInput): add web tests and fix onBlur
192
+
193
+ - Adds `onBlur`
194
+
195
+ - 1417e90: changed native text-input helptext color
196
+
197
+ ## 2.0.0
198
+
199
+ ### Major Changes
200
+
201
+ - cc4355a: feat(blade): added 2px spacing token
202
+
203
+ #### Breaking changes
204
+
205
+ > **Note**
206
+ >
207
+ > This breaking change affects you only if you're using the tokens directly somewhere. If you're only using the components then nothing needs to be updated at your end.
208
+
209
+ - Added 2px token, thus all spacing tokens have shifted by 1 step.
210
+
211
+ #### Migration steps
212
+
213
+ Shift every spacing token other than the first one (`0th` index) by +1
214
+
215
+ ```diff
216
+ - <div style={{ margin: theme.spacing[1] }} />
217
+ + <div style={{ margin: theme.spacing[2] }} />
218
+ ```
219
+
220
+ ### Patch Changes
221
+
222
+ - a402ef1: feat(icons): add `RefreshLeft` icon
223
+
224
+ ## 1.1.0
225
+
226
+ ### Minor Changes
227
+
228
+ - 5f1033c: feat: add `Alert` component :tada:
229
+
230
+ ### Patch Changes
231
+
232
+ - cd5f61f: feat(tokens): add new tokens
233
+ - e8d932a: feat: add `blue` variant to `Badge`
234
+ - acfd566: feat(icons): arrow up and arrow left
235
+
236
+ ## 1.0.2
237
+
238
+ ### Patch Changes
239
+
240
+ - 771981c: fix(blade): radio & checkbox icon alignment
241
+
242
+ ## 1.0.1
243
+
244
+ ### Patch Changes
245
+
246
+ - ef7f459: fix: font weight of `Link` component
247
+
248
+ ## 1.0.0
249
+
250
+ ### Major Changes
251
+
252
+ - 51a6787: feat: add `Radio` & `RadioGroup` component
253
+
254
+ ## ⚠️ Breaking change for `Checkbox`
255
+
256
+ - We've renamed the `neccessityIndicator` prop to `necessityIndicator` to fix a spelling error
257
+
258
+ - 65834be: fix: icon sizes for `Icon`, `IconButton`, `Button`, `Link` & `Spinner` components
259
+
260
+ ## ⚠️ Breaking changes for `Icon`
261
+
262
+ **❗️This version introduces a breaking change for the `Icon` component's `size` prop**
263
+
264
+ Earlier, the `size` prop had the following size to pixel mapping:
265
+
266
+ - **xxsmall:** 10px
267
+ - **xsmall**: 12px
268
+ - **small**: 16px
269
+ - **medium**: 20px
270
+ - **large**: 24px
271
+ - **xlarge**: 32px
272
+
273
+ Now, the correct `size` prop will have the following size to pixel mapping:
274
+
275
+ - **xsmall**: 8px
276
+ - **small**: 12px
277
+ - **medium**: 16px
278
+ - **large**: 20px
279
+ - **xlarge**: 24px
280
+ - **2xlarge**: 32px
281
+
282
+ > ⚠️ `xxsmall` is not an accepted value anymore. Instead, we have a new acceptable value of `2xlarge`.
283
+
284
+ ### Minor Changes
285
+
286
+ - 61a17fe: feat: add `Badge` component
287
+
288
+ ## 0.13.6
289
+
290
+ ### Patch Changes
291
+
292
+ - b365464: fix: button spinner layout
293
+ - f3abfbe: feat(Icons): add new icons
294
+
295
+ ## 0.13.5
296
+
297
+ ### Patch Changes
298
+
299
+ - 7909d7c: fix(blade): Checkbox design changes
300
+
301
+ ## 0.13.4
302
+
303
+ ### Patch Changes
304
+
305
+ - 2778973: chore: add appropriate types for onClick of Button & BaseButton
306
+
307
+ ## 0.13.3
308
+
309
+ ### Patch Changes
310
+
311
+ - 3ea6d6c: fix(blade): fixes checkbox helptext and errortext alignment for individual checkboxes
312
+
313
+ ## 0.13.2
314
+
315
+ ### Patch Changes
316
+
317
+ - 17b2c71: fix: button styling for native
318
+
319
+ ## 0.13.1
320
+
321
+ ### Patch Changes
322
+
323
+ - 985f82a: refactor: use Box component on BaseButton
324
+
325
+ ## 0.13.0
326
+
327
+ ### Minor Changes
328
+
329
+ - b8cc7df: feat: add checkbox component
330
+ - eb65c30: feat: add support for css theme variables
331
+ - f61675e: feat: add `Link` & `BaseLink` components
332
+
333
+ ## 0.12.0
334
+
335
+ ### Minor Changes
336
+
337
+ - 381e9c7: fix(Blade): add `size` prop to Text component and update tokens
338
+
339
+ This PR updates the typography tokens scale for mobile devices to create better visual hierarchy which we received as feedback from other teams as well.
340
+
341
+ It also adds a new `size` prop to `Text` component for `variant='body'`
342
+
343
+ ## 0.11.4
344
+
345
+ ### Patch Changes
346
+
347
+ - 66f9b24: feat(tokens): add new tokens
348
+
349
+ ## 0.11.3
350
+
351
+ ### Patch Changes
352
+
353
+ - e0a2631: feat: add Download, Edit, History, Plus, Pause, & Trash icons
354
+
355
+ ## 0.11.2
356
+
357
+ ### Patch Changes
358
+
359
+ - b2b86b4: fix: SkipNav export
360
+
361
+ ## 0.11.1
362
+
363
+ ### Patch Changes
364
+
365
+ - 873676f: fix: button export to components
366
+
367
+ ## 0.11.0
368
+
369
+ ### Minor Changes
370
+
371
+ - 5d022f4: feat: add `Button` component
372
+
373
+ ### Patch Changes
374
+
375
+ - cddd298: chore: update currency icons
376
+
377
+ ## 0.10.1
378
+
379
+ ### Patch Changes
380
+
381
+ - 7b9baf7: fix(blade): broken gray color types in theme.d.ts file
382
+
383
+ ## 0.10.0
384
+
385
+ ### Minor Changes
386
+
387
+ - a800a96: feat(blade): added makeAccessible function
388
+
389
+ makeAccessible function is a compatibility layer between web & native for accessibility props
390
+ More [info in RFC](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#platform-specific-implementation--5)
391
+
392
+ ### Patch Changes
393
+
394
+ - a800a96: fix(blade): added aria hidden in icons
395
+
396
+ ## 0.9.0
397
+
398
+ ### Minor Changes
399
+
400
+ - 0c3a951: feat(blade): Added SkipNav component
401
+
402
+ Learn more about [Skip Navigations in Accessibility RFC](https://github.com/razorpay/blade/blob/master/rfcs/2022-04-09-accessibility.md#skip-navigations)
403
+
404
+ - 5c750bb: feat(blade): add VisuallyHidden component
405
+
406
+ This component is used specifically when you want to hide certain things visually for people who are not visually impaired but also want to make your content is accessible to visually impaired people via assistive technologies.
407
+
408
+ You can play around with it on [Storybook](https://master--61c19ee8d3d282003ac1d81c.chromatic.com/?path=/docs/components-accessibility-visuallyhidden--visually-hidden)
409
+
410
+ ## 0.8.0
411
+
412
+ ### Minor Changes
413
+
414
+ - 002fce2: fix: icon colors & remove `surface.action.icon.link.*` colors from `theme`
415
+
416
+ ## Breaking Changes
417
+
418
+ - Remove the following tokens from `paymentTheme` & `bankingTheme` theme of Blade:
419
+
420
+ - `colors.surface.action.icon.link.default.lowContrast`
421
+ - `colors.surface.action.icon.link.default.highContrast`
422
+ - `colors.surface.action.icon.link.hover.lowContrast`
423
+ - `colors.surface.action.icon.link.hover.highContrast`
424
+ - `colors.surface.action.icon.link.focus.lowContrast`
425
+ - `colors.surface.action.icon.link.focus.highContrast`
426
+ - `colors.surface.action.icon.link.active.lowContrast`
427
+ - `colors.surface.action.icon.link.active.highContrast`
428
+ - `colors.surface.action.icon.link.disabled.lowContrast`
429
+ - `colors.surface.action.icon.link.disabled.highContrast`
430
+
431
+ If you are using any of these tokens, they will no longer be available in your `theme`. Make sure you remove usage of these tokens from your codebase.
432
+
433
+ ## Fixes
434
+
435
+ 1. Fix incorrect Icon colors that were supported & suggested by TypeScript
436
+
437
+ ## 0.7.2
438
+
439
+ ### Patch Changes
440
+
441
+ - 9f0bb83: feat: add Dollar, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Close icons
442
+
443
+ ## 0.7.1
444
+
445
+ ### Patch Changes
446
+
447
+ - 25a7b89: fix(blade): add contrast prop to Typography components
448
+
449
+ Add `contrast` prop to all the Typography components so that consumers can change the intent to grab the attention towards the text. The possible values for `contrast` are `high` or `low` and accordingly the color token will be used to set the color of the Typography components
450
+
451
+ ## 0.7.0
452
+
453
+ ### Minor Changes
454
+
455
+ - 52efedb: fix(blade): set defaults for all typography components
456
+
457
+ Make all the props optional to have a better DX and add default values for all the important props
458
+
459
+ ## 0.6.0
460
+
461
+ ### Minor Changes
462
+
463
+ - e352eef: fix(blade): add `Heading` component
464
+
465
+ ## 0.5.0
466
+
467
+ ### Minor Changes
468
+
469
+ - 75882a7: feat(Blade): add `Title`component
470
+
471
+ The API for `Title` component can be found under [Typography/Text/\_decisions](https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Typography/_decisions/decisions.md)
472
+
473
+ ## 0.4.0
474
+
475
+ ### Minor Changes
476
+
477
+ - 294173e: - Add the following components that would act as building blocks for our icons:
478
+ 1. `Svg`
479
+ 2. `Path`
480
+ 3. `Rect`
481
+ 4. `Defs`
482
+ 5. `ClipPath`
483
+ 6. `G`
484
+ - Add `CreditCardIcon` component
485
+ - Add `RupeeIcon` component
486
+
487
+ ### Patch Changes
488
+
489
+ - e76cd01: feat/add-text-component
490
+
491
+ ## 0.3.0
492
+
493
+ ### Minor Changes
494
+
495
+ - a20b608: feat(blade): add motion tokens
496
+
497
+ ### Motion tokens
498
+
499
+ We have added tokens for
500
+
501
+ 1. Delay
502
+ 2. Duration
503
+ 3. Easing
504
+
505
+ You can find a detailed RFC for motion here: [View Formatted RFC](https://github.com/razorpay/blade/blob/rfc/2022-03-22-motion-rfc/rfcs/2022-03-22-motion-rfc.md)
506
+
507
+ ## 0.2.0
508
+
509
+ ### Minor Changes
510
+
511
+ - 6885ac3: feat(blade): add BaseText component
512
+
513
+ ## 0.1.6
514
+
515
+ ### Patch Changes
516
+
517
+ - 33e3930: feat(blade): add listener for toggling breakpoints
518
+
519
+ **Updates**
520
+
521
+ - Add `breakpoints` token to the themes.
522
+ - Out of the box responsiveness support for typography tokens.
523
+ - Publish `useBreakpoint` hook.
524
+ - Following breakpoints are supported as of today.
525
+ ```
526
+ /** max width: 320px */
527
+ xs: 320;
528
+ /** min width: 321px and max width: 480px */
529
+ s: 480;
530
+ /** min width: 481px and max width: 768px */
531
+ m: 768;
532
+ /** min width: 769 and max width: 1024px */
533
+ l: 1024;
534
+ /** min width: 1025 and max width: 1200px */
535
+ xl: 1200;
536
+ /** min width: 1201px */
537
+ max: 1201;
538
+ ```
539
+ - For web the typography scale will toggle between mobile and desktop
540
+ - `xs, s, m` are considered as mobile
541
+ - `l, xl, xl` are considered as desktop
542
+ - For react native we always default to mobile typography scale
543
+
544
+ **What does it mean for me(as a developer)?**
545
+
546
+ - If you’re already using Blade tokens then you can leverage this by just running `yarn upgrade @razorpay/blade@0.1.6` and that’s it you are set 🚀
547
+ - You can use the typography tokens as you were doing previously. Refer the [usage guideline here](https://61c19ee8d3d282003ac1d81c-jukcfyruls.chromatic.com/?path=/story/guides-usage--page&globals=measureEnabled:false#tokens)
548
+ - You can use these `breakpoints` as a base reference to build your next set of features by just following the [usage guidelines here](https://61c19ee8d3d282003ac1d81c-jukcfyruls.chromatic.com/?path=/story/tokens-breakpoints--page&globals=measureEnabled:false).
549
+
550
+ This is our first step towards building responsive and adaptive applications. We’ll be publishing Typography Components next which will be built on top of these tokens and you can use them directly for your projects. Meanwhile, [read more about our responsive and adaptive strategy in this RFC](https://github.com/razorpay/blade/blob/master/rfcs/2022-02-11-responsive-and-adaptive-layout-strategy.md)
551
+
552
+ ## 0.1.5
553
+
554
+ ### Patch Changes
555
+
556
+ - 04677a3: fix(blade): add lineheight tokens
557
+
558
+ ## 0.1.4
559
+
560
+ ### Patch Changes
561
+
562
+ - f992f77: fix(blade): typo in exports field
563
+
564
+ ## 0.1.3
565
+
566
+ ### Patch Changes
567
+
568
+ - d32dd9d: fix(blade): add overlay color token
569
+
570
+ ## 0.1.2
571
+
572
+ ### Patch Changes
573
+
574
+ - 8cddfad: fix(blade): update desktop typography scale
575
+
576
+ ## 0.1.1
577
+
578
+ ### Patch Changes
579
+
580
+ - 6c69a4d: fix(blade): update imports and exports
581
+
582
+ ## 0.1.0
583
+
584
+ ### Minor Changes
585
+
586
+ - de4124f: ### ⚠️ **Breaking Change** ⚠️
587
+ This PR introduces a major breaking change on how we access tokens.
588
+
589
+ ### Why did we want to change the way we access tokens?
590
+
591
+ So, previously if you had to start consuming tokens from the new version of Blade you start with importing the theme provider:
592
+
593
+ ```jsx
594
+ // App entry point
595
+ import { ThemeProvider } from '@razorpay/blade/components';
596
+ import { paymentTheme } from '@razorpay/blade/tokens';
597
+
598
+ function App(): JSX.Element {
599
+ return (
600
+ <React.Fragment>
601
+ <GlobalStyle />
602
+ <ThemeProvider theme={paymentTheme}>
603
+ <Card />
604
+ </ThemeProvider>
605
+ </React.Fragment>
606
+ );
607
+ }
608
+
609
+ export default App;
610
+ ```
611
+
612
+ And then in one of our components, we'll use the `useTheme()` hook to get the theme and the mode like following 👇
613
+
614
+ ```jsx
615
+ const StyledCard = styled.div(
616
+ ({ theme }: { theme: Theme }) => `
617
+ width: 368px;
618
+ background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
619
+ border-radius: ${theme.border.radius.medium}px;
620
+ box-shadow: ${theme.shadows.offsetX.level[1]}px ${theme.shadows.offsetY.level[1]}px ${theme.shadows.blurRadius.level[1]}px ${theme.shadows.color.level[1].onLight}, ${theme.shadows.offsetX.level[1]}px ${theme.shadows.offsetY.level[1]}px ${theme.shadows.blurRadius.level[1]}px ${theme.shadows.color.level[1].onLight};
621
+ padding: ${theme.spacing[5]}px;
622
+ display: flex;
623
+ flex-direction: column;
624
+ `,
625
+ );
626
+
627
+ const Card = (): React.ReactElement => {
628
+ const { theme } = useTheme();
629
+ return (
630
+ <React.Fragment>
631
+ <DisplayLarge theme={theme}>Cash Advance </DisplayLarge>
632
+ <StyledCard theme={theme}>
633
+ <AlertInformation theme={theme}>
634
+ The interest charged will be deposited back into your bank account within a day of
635
+ repayment.
636
+ </AlertInformation>
637
+ <Divider theme={theme} />
638
+ <CaptionRegular theme={theme}>
639
+ This amount will be deducted in 3 installments from your settlement balance between Feb
640
+ 18-20 on a daily basis.
641
+ </CaptionRegular>
642
+ </StyledCard>
643
+ </React.Fragment>
644
+ );
645
+ };
646
+ ```
647
+
648
+ #### Problem with the existing implementation:
649
+
650
+ So we pass the raw theme tokens which have everything light mode colors, dark mode colors. Different typography scales for desktop, mobile, etc. But as a consumer look at how do we access the tokens from the above file
651
+
652
+ ```jsx
653
+
654
+ const { theme } = useTheme();
655
+
656
+ background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
657
+ font-size: ${theme.typography.desktop.fonts.size[200]}px;
658
+ ```
659
+
660
+ - Isn't it weird to explicitly write `onLight`/`onDark` by hand while accessing color tokens?
661
+ - Isn't it weird to explicitly write `desktop` to access the typography scale for desktop?
662
+ - How would you as a developer change things let's say if the user toggles the color mode?
663
+ - How would you as a developer change the typography scale if the user switches from desktop to mobile or vice-versa?
664
+
665
+ You can't! Because we have **hardcoded** the object properties and which means we lost the power of dynamically changing these things based on the user's behavior which is incorrect.
666
+
667
+ #### What is the root cause of this issue?
668
+
669
+ The root cause is the mental model of how we store tokens and how do we consume them. Typically our tokens are nothing but our design decisions. So this means we need to store every decision in our token file, for eg: light mode colors, dark mode colors, typography scale for desktop, typography scale for mobile but when we consume them we want the system to take care of these things and give us single value for the modes and the platform.
670
+
671
+ So we want something like this 👇
672
+
673
+ ```diff
674
+
675
+ const { theme } = useTheme();
676
+
677
+ -background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
678
+ +background-color: ${theme.colors.surface.background.level2.lowContrast};
679
+ -font-size: ${theme.typography.desktop.fonts.size[200]}px;
680
+ +font-size: ${theme.typography.fonts.size[200]}px;
681
+ ```
682
+
683
+ Notice the removal of **`onLight`** and **`desktop`** keys from the theme object.
684
+
685
+ So we want our system to behave in such a manner that:
686
+
687
+ - We input the raw theme(which has color modes and platform types)
688
+ - It will output the flat theme which will have color mode and platform type selected, so we don't have to hardcode `onLight`/`onDark` or `desktop`/`mobile`.
689
+
690
+ ### What is the solution?
691
+
692
+ The system we spoke about is nothing but our `BladeProvider`(previously known as `ThemeProvider`). It'll accept the raw theme as a prop and then based on the device type and color mode pick those values from `themeTokens` and set it in the context as `theme`. We can then use `useTheme()` hook to get the theme from the context which will be flattened.
693
+
694
+ This is how things will look after this change 👇
695
+
696
+ ```diff
697
+ // App entry point
698
+ -import { ThemeProvider } from '@razorpay/blade/components';
699
+ +import { BladeProvider } from '@razorpay/blade/components';
700
+ import { paymentTheme } from '@razorpay/blade/tokens';
701
+
702
+ function App(): JSX.Element {
703
+ return (
704
+ <React.Fragment>
705
+ <GlobalStyle />
706
+ - <ThemeProvider theme={paymentTheme}>
707
+ + <BladeProvider themeTokens={paymentTheme}>
708
+ <Card />
709
+ - </ThemeProvider>
710
+ + </BladeProvider>
711
+ </React.Fragment>
712
+ );
713
+ }
714
+
715
+ export default App;
716
+
717
+ // somewhere in the app
718
+ const { theme } = useTheme();
719
+
720
+ -background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
721
+ +background-color: ${theme.colors.surface.background.level2.lowContrast};
722
+ -font-size: ${theme.typography.desktop.fonts.size[200]}px;
723
+ +font-size: ${theme.typography.fonts.size[200]}px;
724
+ ```
725
+
726
+ ### Migration guide for apps using the older version
727
+
728
+ 1. Rename **ThemeProvider** to **BladeProvider**
729
+
730
+ ```diff
731
+ -import { ThemeProvider } from '@razorpay/blade/components';
732
+ +import { BladeProvider } from '@razorpay/blade/components';
733
+ ```
734
+
735
+ 2. Rename `theme` prop on provider to `themeTokens`
736
+
737
+ ```diff
738
+ -<BladeProvider theme={paymentTheme}>
739
+ +<BladeProvider themeTokens={paymentTheme}>
740
+ ```
741
+
742
+ 3. import `Theme` type to be imported from `@razorpay/blade/components` instead of `@razorpay/blade/tokens`
743
+
744
+ ```diff
745
+ -import type { Theme } from '@razorpay/blade/tokens';
746
+ +import type { Theme } from '@razorpay/blade/components';
747
+ ```
748
+
749
+ 4. Remove all the `onLight`/`onDark` keywords from the theme colors object
750
+
751
+ ```diff
752
+ -background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
753
+ +background-color: ${theme.colors.surface.background.level2.lowContrast};
754
+ ```
755
+
756
+ 5. Remove all the `desktop`/`mobile` keywords from the theme typography object
757
+
758
+ ```diff
759
+ -background-color: ${theme.colors.surface.background.level2.lowContrast.onLight};
760
+ +background-color: ${theme.colors.surface.background.level2.lowContrast};
761
+ ```
762
+
763
+ ## 0.0.8
764
+
765
+ ### Patch Changes
766
+
767
+ - 7a09800: fix(blade): add description in token types
768
+
769
+ ## 0.0.7
770
+
771
+ ### Patch Changes
772
+
773
+ - 1aa2961: fix(blade): export all the types of global tokens for consumers
774
+ - d8d8027: fix(blade): typo in color tokens
775
+
776
+ ## 0.0.6
777
+
778
+ ### Patch Changes
779
+
780
+ - 8374dc1: build(blade): generate root `.d.ts`
781
+
782
+ ## 0.0.5
783
+
784
+ ### Patch Changes
785
+
786
+ - 057cf66: build(blade): add re-exports to `.ts` instead of `.js`
787
+
788
+ ## 0.0.4
789
+
790
+ ### Patch Changes
791
+
792
+ - efb59d9: feat(blade): add type generation scripts
793
+
794
+ ## 0.0.3
795
+
796
+ ### Patch Changes
797
+
798
+ - f0b2b01: fix(blade): typo in exports field
799
+
800
+ ## 0.0.2
801
+
802
+ ### Patch Changes
803
+
804
+ - 55ac5d3: feat(blade): add rollup to build blade