Skip to content

Commit

Permalink
Merge branch 'rebranding/master' into anu/rebrand-story-sanitycheck
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuraghazra
anuraghazra committed Jan 19, 2024
2 parents 96c6a22 + 36c708a commit 4d46e22
Show file tree
Hide file tree
Showing 80 changed files with 4,218 additions and 13,745 deletions.
30 changes: 29 additions & 1 deletion packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ it('should migrate the Amount component', async () => {
<>
<Amount value={1234} intent="positive" />
<Amount value={1234} intent="negative" />
<Amount value={1234} intent="information" />
<Amount value={1234} intent="notice" />
<Amount size="body-small" value={123456.789} />
<Amount size="body-small-bold" value={123456.789} />
Expand All @@ -27,6 +33,14 @@ it('should migrate the Amount component', async () => {
<Amount size="title-small" value={123456.789} />
<CardHeaderAmount value={1234} intent="positive" />
<CardHeaderAmount value={1234} intent="negative" />
<CardHeaderAmount value={1234} intent="information" />
<CardHeaderAmount value={1234} intent="notice" />
<CardHeaderAmount size="title-medium" value={123456.789} />
<CardHeaderAmount size="body-small" value={123456.789} />
Expand Down Expand Up @@ -57,7 +71,13 @@ it('should migrate the Amount component', async () => {
expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Amount value={1234} color="positive" />
<Amount value={1234} color="feedback.text.positive.intense" />
<Amount value={1234} color="feedback.text.negative.intense" />
<Amount value={1234} color="feedback.text.information.intense" />
<Amount value={1234} color="feedback.text.notice.intense" />
<Amount value={123456.789} type="body" size="small" />
Expand All @@ -77,6 +97,14 @@ it('should migrate the Amount component', async () => {
<Amount value={123456.789} type="heading" size="large" />
<CardHeaderAmount value={1234} color="feedback.text.positive.intense" />
<CardHeaderAmount value={1234} color="feedback.text.negative.intense" />
<CardHeaderAmount value={1234} color="feedback.text.information.intense" />
<CardHeaderAmount value={1234} color="feedback.text.notice.intense" />
<CardHeaderAmount value={123456.789} type="heading" size="xlarge" />
<CardHeaderAmount value={123456.789} type="body" size="small" />
Expand Down
16 changes: 12 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-card.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,9 @@ it('should migrate the Card component', async () => {
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter intent="positive" value={12} />}
/>
<CardHeaderTrailing visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />} />
<CardHeaderTrailing
visual={<CardHeaderAmount value={123} intent="positive" size="title-small" />}
/>
</CardHeader>
<CardBody>
<Text> Hello World</Text>
Expand All @@ -91,15 +93,15 @@ it('should migrate the Card component', async () => {
expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
</Text>
</CardBody>
</Card>
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.moderate">
<Card elevation="lowRaised" padding="spacing.7" backgroundColor="surface.background.gray.intense">
<CardBody>
<Text>
Create Razorpay Payments Links and share them with your customers from the Razorpay Dashboard or using APIs and start accepting payments. Check the advantages, payment methods, international currency support and more.
Expand Down Expand Up @@ -160,7 +162,13 @@ it('should migrate the Card component', async () => {
prefix={<CardHeaderIcon icon={InfoIcon} />}
suffix={<CardHeaderCounter value={12} color="positive" />}
/>
<CardHeaderTrailing visual={<CardHeaderAmount value={123} color="positive" type="heading" size="large" />} />
<CardHeaderTrailing
visual={<CardHeaderAmount
value={123}
color="feedback.text.positive.intense"
type="heading"
size="large" />}
/>
</CardHeader>
<CardBody>
<Text> Hello World</Text>
Expand Down
8 changes: 4 additions & 4 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ it('should update the theme in BladeProvider', async () => {
);

expect(result).toMatchInlineSnapshot(`
"import { BladeProvider } from "@razorpay/blade-rebranded/components";
import { bladeTheme } from "@razorpay/blade-rebranded/tokens";
"import { BladeProvider } from '@razorpay/blade/components';
import { bladeTheme } from '@razorpay/blade/tokens';
const AppWrapper = () => {
return (
Expand Down Expand Up @@ -156,8 +156,8 @@ it('should update the theme in BladeProvider', async () => {
);

expect(result).toMatchInlineSnapshot(`
"import { BladeProvider } from "@razorpay/blade-rebranded/components";
import { bladeTheme } from "@razorpay/blade-rebranded/tokens";
"import { BladeProvider } from '@razorpay/blade/components';
import { bladeTheme } from '@razorpay/blade/tokens';
const AppWrapper = () => {
return (
Expand Down
12 changes: 10 additions & 2 deletions ...ade/codemods/brand-refresh/transformers/__tests__/migrate-contrast-intent-variant.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ it('should remove variant/intent prop in favor of color prop', async () => {
<ProgressBar intent="positive" label="Label" size="medium" value={10} />
<ProgressBar intent="positive" label="Label" size="medium" value={10} contrast="low" />
<ProgressBar intent="positive" label="Label" size="medium" value={10} contrast="high" />
<Spinner contrast="high" />
<Spinner contrast="low" />
<Spinner color="default" />
</>
);
`,
Expand Down Expand Up @@ -185,13 +189,17 @@ it('should remove variant/intent prop in favor of color prop', async () => {
<Chip value="no" color="primary"> No </Chip>
</ChipGroup>
<Amount value={1234} color="positive" />
<Amount color="feedback.text.positive.intense" value={1234} />
<CardHeaderAmount value={1234} color="positive" />
<CardHeaderAmount color="feedback.text.positive.intense" value={1234} />
<ProgressBar label="Label" size="medium" value={10} color="positive" />
<ProgressBar label="Label" size="medium" value={10} color="positive" />
<ProgressBar label="Label" size="medium" value={10} contrast="UPDATE_THIS_VALUE_WITH_A_NEW_COLOR_TOKEN" color="positive" />
<Spinner color="white" />
<Spinner color="primary" />
<Spinner color="primary" />
</>
);"
`);
Expand Down
182 changes: 182 additions & 0 deletions packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-table.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
import { applyTransform } from '@hypermod/utils';
import * as transformer from '..';

it('should migrate the ActionList component', async () => {
const result = await applyTransform(
transformer,
`
const App = () => (
<>
<Table {...args} data={data} surfaceLevel={3}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
<Table {...args} data={data} surfaceLevel={2}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
<Table {...args} data={data} surfaceLevel={1}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
</>
);
`,
{ parser: 'tsx' },
);

expect(result).toMatchInlineSnapshot(`
"const App = () => (
<>
<Table {...args} data={data}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
<Table {...args} data={data}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
<Table {...args} data={data}>
{(tableData) => (
<>
<TableHeader>
<TableHeaderRow>
<TableHeaderCell headerKey="PAYMENT_ID">ID</TableHeaderCell>
<TableHeaderCell headerKey="AMOUNT">Amount</TableHeaderCell>
<TableHeaderCell headerKey="ACCOUNT">Account</TableHeaderCell>
</TableHeaderRow>
</TableHeader>
<TableBody>
{tableData.map((tableItem, index) => (
<TableRow key={index} item={tableItem}>
<TableCell>
<Code size="medium">{tableItem.paymentId}</Code>
</TableCell>
<TableCell>
<Amount value={tableItem.amount} />
</TableCell>
<TableCell>{tableItem.account}</TableCell>
</TableRow>
))}
</TableBody>
</>
)}
</Table>
</>
);"
`);
});
2 changes: 1 addition & 1 deletion packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ it('should correctly convert Title to Heading component', async () => {
);

expect(result).toMatchInlineSnapshot(`
"import { Heading } from "@razorpay/blade-rebranded/components";
"import { Heading } from '@razorpay/blade/components';
const App = () => (
<>
<Heading size="large"> Lorem ipsum </Heading>
Expand Down
Loading

0 comments on commit 4d46e22

Please sign in to comment.