Skip to content

Commit 87cd889

Browse files
anuraghazraanuraghazra
committed
Merge branch 'rebranding/master' into anu/rebrand-switch
2 parents 0b1c881 + bc8425b commit 87cd889

36 files changed

+466
-298
lines changed

‎.github/pull_request_template.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
## Description
2+
3+
<!-- Briefly explain the purpose of your PR -->
4+
5+
## Changes
6+
7+
<!-- List the specific changes made, consider adding screenshots if relevant -->
8+
9+
## Additional Information
10+
11+
<!-- Include any relevant details, links to issues, or additional messages -->
12+
13+
## Component Checklist
14+
15+
<!-- Ensure that the following tasks are completed before submitting your PR. Tick the applicable boxes -->
16+
17+
- [ ] Update Component Status Page
18+
- [ ] Perform Manual Testing in Other Browsers
19+
- [ ] Add KitchenSink Story
20+
- [ ] Add Interaction Tests (if applicable)
21+
- [ ] Add changeset

‎packages/blade/.storybook/react/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,10 @@ const config: StorybookConfig = {
4040
'../../src/components/Accordion/**/*.stories.@(ts|tsx|js|jsx)',
4141
'../../src/components/BottomSheet/**/**/*.stories.@(ts|tsx|js|jsx)',
4242
'../../src/components/Modal/**/**/*.stories.@(ts|tsx|js|jsx)',
43+
'../../src/components/Radio/**/**/*.stories.@(ts|tsx|js|jsx)',
4344
'../../src/components/Popover/**/**/*.stories.@(ts|tsx|js|jsx)',
4445
'../../src/components/Switch/**/**/*.stories.@(ts|tsx|js|jsx)',
46+
'../../src/components/Checkbox/**/**/*.stories.@(ts|tsx|js|jsx)',
4547
'../../docs/**/*.stories.mdx',
4648
'../../docs/**/*.stories.@(ts|tsx|js|jsx)',
4749
// '../../src/**/*.stories.mdx',

‎packages/blade/.storybook/react/preview.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ export const parameters = {
7272
}
7373
return bladeTheme;
7474
};
75+
76+
if (context.store.globals.globals.version === '10' && window.top) {
77+
window.top.location.href =
78+
'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
79+
window.top.location.pathname +
80+
window.top.location.search;
81+
}
7582
return (
7683
<DocsContainer context={context}>
7784
<BladeProvider
@@ -146,6 +153,13 @@ export const decorators = [
146153
return bladeTheme;
147154
};
148155

156+
if (context.globals.version === '10' && window.top) {
157+
window.top.location.href =
158+
'https://v10--61c19ee8d3d282003ac1d81c.chromatic.com' +
159+
window.top.location.pathname +
160+
window.top.location.search;
161+
}
162+
149163
return (
150164
<ErrorBoundary>
151165
<GlobalStyle />
@@ -164,6 +178,23 @@ export const decorators = [
164178
];
165179

166180
export const globalTypes = {
181+
version: {
182+
name: 'Blade Documentation Version',
183+
description: 'Version of the Blade',
184+
defaultValue: '11',
185+
toolbar: {
186+
icon: 'time',
187+
title: ' v11 - Rebranded',
188+
// Array of plain string values or MenuItem shape (see below)
189+
items: [
190+
{ value: '10', title: ' v10 - Old' },
191+
{ value: '11', title: ' v11 - Rebranded', default: true },
192+
],
193+
dynamicTitle: true,
194+
// Property that specifies if the name of the item will be displayed
195+
showName: false,
196+
},
197+
},
167198
colorScheme: {
168199
name: 'Color Scheme',
169200
description: 'Color Scheme for Blade',

‎packages/blade/jest.native.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ module.exports = {
2121
testMatch: [
2222
...rebrandedComponents.map((component) => `**/${component}.native.test.{ts,tsx}`),
2323
'**/Icons/*Icon/*.native.test.{ts,tsx}',
24+
'**/utils/**/*.test.{ts,tsx}',
2425
],
2526
transform: {
2627
'\\.(js|ts|tsx)?$': './jest-preprocess.js',

‎packages/blade/jest.web.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const baseConfig = {
1818
...rebrandedComponents.map((component) => `**/${component}.web.test.{ts,tsx}`),
1919
'**/Icons/*Icon/*.web.test.{ts,tsx}',
2020
'**/codemods/**/*.test.{ts,tsx}',
21+
'**/utils/**/*.test.{ts,tsx}',
2122
],
2223
transform: {
2324
'\\.(js|ts|tsx)?$': './jest-preprocess.js',

‎packages/blade/rebranded-components.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ const rebrandedComponents = [
3131
'VisuallyHidden',
3232
'Tooltip',
3333
'Switch',
34+
'Radio',
35+
'Checkbox',
3436
];
3537

3638
module.exports = { rebrandedComponents };

‎packages/blade/src/components/Card/Card.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
CardHeaderBadge,
1818
CardHeaderIconButton,
1919
CardHeaderLink,
20+
CardHeaderAmount,
2021
CardHeaderText,
2122
} from './';
2223
import { Sandbox } from '~utils/storybook/Sandbox';
@@ -151,6 +152,7 @@ const visual = {
151152
Text: <CardHeaderText>$100</CardHeaderText>,
152153
IconButton: <CardHeaderIconButton icon={TrashIcon} />,
153154
Badge: <CardHeaderBadge color="positive">NEW</CardHeaderBadge>,
155+
Amount: <CardHeaderAmount value={1000} />,
154156
};
155157

156158
export default {

‎packages/blade/src/components/Card/CardHeader.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import { makeSpace } from '~utils/makeSpace';
2424
import { getComponentId, isValidAllowedChildren } from '~utils/isValidAllowedChildren';
2525
import { throwBladeError } from '~utils/logger';
2626
import { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';
27+
import type { AmountProps } from '~components/Amount';
28+
import { Amount } from '~components/Amount';
2729

2830
const _CardHeaderIcon = ({ icon: Icon }: { icon: IconComponent }): React.ReactElement => {
2931
useVerifyInsideCard('CardHeaderIcon');
@@ -52,15 +54,15 @@ const CardHeaderBadge = assignWithoutSideEffects(_CardHeaderBadge, {
5254
componentId: ComponentIds.CardHeaderBadge,
5355
});
5456

55-
// @TODO: uncomment and export this when Amount component is migrated
56-
// const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
57-
// useVerifyInsideCard('CardHeaderAmount');
57+
const _CardHeaderAmount = (props: AmountProps): React.ReactElement => {
58+
useVerifyInsideCard('CardHeaderAmount');
5859

59-
// return <Amount {...props} />;
60-
// };
61-
// const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {
62-
// componentId: ComponentIds.CardHeaderAmount,
63-
// });
60+
return <Amount {...props} />;
61+
};
62+
63+
const CardHeaderAmount = assignWithoutSideEffects(_CardHeaderAmount, {
64+
componentId: ComponentIds.CardHeaderAmount,
65+
});
6466

6567
const _CardHeaderText = (props: TextProps<{ variant: TextVariant }>): React.ReactElement => {
6668
useVerifyInsideCard('CardHeaderText');
@@ -228,6 +230,7 @@ const headerTrailingAllowedComponents = [
228230
ComponentIds.CardHeaderText,
229231
ComponentIds.CardHeaderIconButton,
230232
ComponentIds.CardHeaderBadge,
233+
ComponentIds.CardHeaderAmount,
231234
];
232235

233236
const _CardHeaderTrailing = ({ visual }: CardHeaderTrailingProps): React.ReactElement => {
@@ -259,5 +262,6 @@ export {
259262
CardHeaderCounter,
260263
CardHeaderText,
261264
CardHeaderLink,
265+
CardHeaderAmount,
262266
CardHeaderIconButton,
263267
};

‎packages/blade/src/components/Card/__tests__/Card.native.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ describe('<Card />', () => {
163163
</Card>,
164164
),
165165
).toThrow(
166-
'[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
166+
'[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
167167
);
168168
mockConsoleError.mockRestore();
169169
});

‎packages/blade/src/components/Card/__tests__/Card.web.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ describe('<Card />', () => {
160160
</Card>,
161161
),
162162
).toThrow(
163-
'[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge` component is accepted in visual',
163+
'[Blade: CardHeaderTrailing]: Only one of `CardHeaderLink, CardHeaderText, CardHeaderIconButton, CardHeaderBadge, CardHeaderAmount` component is accepted in visual',
164164
);
165165
mockConsoleError.mockRestore();
166166
});

‎packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,7 @@ const CheckboxIcon = ({
7878
size,
7979
}: CheckboxIconProps) => {
8080
const { theme } = useTheme();
81-
const defaultIconColor = getIn(theme, 'colors.brand.gray.200.lowContrast');
82-
const disabledIconColor = getIn(theme, 'colors.brand.gray.500.lowContrast');
83-
const iconColor = isDisabled ? disabledIconColor : defaultIconColor;
84-
81+
const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal');
8582
return (
8683
<CheckboxIconWrapper
8784
size={size}

‎packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIconWrapperStyles.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const getCheckboxIconWrapperStyles = ({
2424
const checked = isChecked ? 'checked' : 'unchecked';
2525
const background = checkboxIconColors.variants[variant].background[checked];
2626
const border = checkboxIconColors.variants[variant].border[checked];
27-
const backgroundColor = background === 'transparent' ? background : getIn(theme, background);
28-
const borderColor = border === 'transparent' ? border : getIn(theme, border);
27+
const backgroundColor = getIn(theme, background);
28+
const borderColor = getIn(theme, border);
2929

3030
return {
3131
position: 'relative',

‎packages/blade/src/components/Checkbox/__tests__/__snapshots__/Checkbox.native.test.tsx.snap

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
9595
[
9696
{
9797
"alignItems": "center",
98-
"backgroundColor": "transparent",
99-
"borderColor": "hsla(214, 18%, 69%, 1)",
98+
"backgroundColor": "hsla(0, 0%, 100%, 0)",
99+
"borderColor": "hsla(211, 27%, 76%, 1)",
100100
"borderRadius": 2,
101101
"borderStyle": "solid",
102102
"borderWidth": 1.5,
@@ -126,16 +126,17 @@ exports[`<Checkbox /> should render checkbox with label 1`] = `
126126
/>
127127
<Text
128128
accessible={true}
129-
color="surface.text.subtle.lowContrast"
130-
data-blade-component="base-text"
129+
color="surface.text.gray.subtle"
130+
data-blade-component="text"
131131
fontFamily="text"
132132
fontSize={100}
133+
fontStyle="normal"
133134
fontWeight="regular"
134135
lineHeight={100}
135136
style={
136137
[
137138
{
138-
"color": "hsla(216, 27%, 36%, 1)",
139+
"color": "hsla(211, 26%, 34%, 1)",
139140
"fontFamily": "Inter",
140141
"fontSize": 14,
141142
"fontStyle": "normal",
@@ -260,8 +261,8 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
260261
[
261262
{
262263
"alignItems": "center",
263-
"backgroundColor": "transparent",
264-
"borderColor": "hsla(216, 15%, 54%, 0.18)",
264+
"backgroundColor": "hsla(0, 0%, 100%, 0)",
265+
"borderColor": "hsla(214, 40%, 92%, 1)",
265266
"borderRadius": 2,
266267
"borderStyle": "solid",
267268
"borderWidth": 1.5,
@@ -291,16 +292,17 @@ exports[`<Checkbox /> should set disabled state with isDisabled 1`] = `
291292
/>
292293
<Text
293294
accessible={true}
294-
color="surface.text.placeholder.lowContrast"
295-
data-blade-component="base-text"
295+
color="surface.text.gray.disabled"
296+
data-blade-component="text"
296297
fontFamily="text"
297298
fontSize={100}
299+
fontStyle="normal"
298300
fontWeight="regular"
299301
lineHeight={100}
300302
style={
301303
[
302304
{
303-
"color": "hsla(214, 18%, 69%, 1)",
305+
"color": "hsla(211, 20%, 52%, 0.32)",
304306
"fontFamily": "Inter",
305307
"fontSize": 14,
306308
"fontStyle": "normal",
@@ -425,8 +427,8 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
425427
[
426428
{
427429
"alignItems": "center",
428-
"backgroundColor": "hsla(9, 91%, 56%, 0.09)",
429-
"borderColor": "hsla(8, 73%, 47%, 1)",
430+
"backgroundColor": "hsla(0, 0%, 100%, 0)",
431+
"borderColor": "hsla(4, 74%, 49%, 1)",
430432
"borderRadius": 2,
431433
"borderStyle": "solid",
432434
"borderWidth": 1.5,
@@ -456,16 +458,17 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
456458
/>
457459
<Text
458460
accessible={true}
459-
color="surface.text.subtle.lowContrast"
460-
data-blade-component="base-text"
461+
color="surface.text.gray.subtle"
462+
data-blade-component="text"
461463
fontFamily="text"
462464
fontSize={100}
465+
fontStyle="normal"
463466
fontWeight="regular"
464467
lineHeight={100}
465468
style={
466469
[
467470
{
468-
"color": "hsla(216, 27%, 36%, 1)",
471+
"color": "hsla(211, 26%, 34%, 1)",
469472
"fontFamily": "Inter",
470473
"fontSize": 14,
471474
"fontStyle": "normal",
@@ -558,7 +561,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
558561
>
559562
<RNSVGPath
560563
d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z"
561-
fill={4291770400}
564+
fill={4288286222}
562565
propList={
563566
[
564567
"fill",
@@ -567,7 +570,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
567570
/>
568571
<RNSVGPath
569572
d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z"
570-
fill={4291770400}
573+
fill={4288286222}
571574
propList={
572575
[
573576
"fill",
@@ -577,7 +580,7 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
577580
<RNSVGPath
578581
clipRule={0}
579582
d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z"
580-
fill={4291770400}
583+
fill={4288286222}
581584
fillRule={0}
582585
propList={
583586
[
@@ -600,16 +603,17 @@ exports[`<Checkbox /> should set error state with validationState 1`] = `
600603
/>
601604
<Text
602605
accessible={true}
603-
color="feedback.text.negative.lowContrast"
604-
data-blade-component="base-text"
606+
color="feedback.text.negative.intense"
607+
data-blade-component="text"
605608
fontFamily="text"
606609
fontSize={50}
607610
fontStyle="italic"
611+
fontWeight="regular"
608612
lineHeight={50}
609613
style={
610614
[
611615
{
612-
"color": "hsla(8, 73%, 47%, 1)",
616+
"color": "hsla(0, 83%, 33%, 1)",
613617
"fontFamily": "Inter",
614618
"fontSize": 11,
615619
"fontStyle": "italic",

0 commit comments

Comments
 (0)