From 0d729c27f6dfae92afcfa2ac065185880c6427fc Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Tue, 20 Feb 2024 11:46:08 +0530 Subject: [PATCH 01/16] feat: add breadcrumb implementation --- .../Breadcrumb/Breadcrumb.stories.tsx | 121 ++++++++++++++++++ .../src/components/Breadcrumb/Breadcrumb.tsx | 75 +++++++++++ .../components/Breadcrumb/BreadcrumbItem.tsx | 45 +++++++ .../blade/src/components/Breadcrumb/index.ts | 3 + .../blade/src/components/Breadcrumb/types.ts | 64 +++++++++ .../src/components/Link/BaseLink/BaseLink.tsx | 3 + 6 files changed, 311 insertions(+) create mode 100644 packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx create mode 100644 packages/blade/src/components/Breadcrumb/Breadcrumb.tsx create mode 100644 packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx create mode 100644 packages/blade/src/components/Breadcrumb/index.ts create mode 100644 packages/blade/src/components/Breadcrumb/types.ts diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 00000000000..f500af42fe9 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,121 @@ +/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */ +/* eslint-disable jsx-a11y/label-has-associated-control */ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { Title } from '@storybook/addon-docs'; +import type { StoryFn, Meta } from '@storybook/react'; +import React from 'react'; +import type { BreadcrumbProps } from './types'; +import { Breadcrumb } from './Breadcrumb'; +import { BreadcrumbItem } from './BreadcrumbItem'; +import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; +import { Sandbox } from '~utils/storybook/Sandbox'; +import { Box } from '~components/Box'; +import { HomeIcon } from '~components/Icons'; + +const Page = (): React.ReactElement => { + return ( + + Usage + + {` + import { ToastContainer, useToast } from '@razorpay/blade/components'; + + function App(): React.ReactElement { + const toast = useToast(); + + // Integrating Blade Toast in your App + // 1. Render the ToastContainer component at the root of your app + // 2. Utilize the methods exposed via useToast hook to show/dismiss toasts + return ( + + + + + ); + } + + export default App; + `} + + + ); +}; + +export default { + title: 'Components/Breadcrumb', + component: Breadcrumb, + tags: ['autodocs'], + parameters: { + docs: { + page: Page, + }, + }, +} as Meta; + +const BasicToastTemplate: StoryFn = () => { + return ( + + + + + Dashboard + + Settlements + + + + + Dashboard + + Settlements + + + + + Dashboard + + Settlements + + + + + + Home + Dashboard + + Settlements + + + + Home + Dashboard + + Settlements + + + + + + Dashboard + + Settlements + + + + + + ); +}; + +BasicToastTemplate.storyName = 'Basic'; +export const Basic = BasicToastTemplate.bind({}); diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 00000000000..00fae34c966 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,75 @@ +/* eslint-disable react-native-a11y/has-valid-accessibility-role */ +import React from 'react'; +import type { BreadcrumbProps } from './types'; +import BaseBox from '~components/Box/BaseBox'; +import { Text } from '~components/Typography'; +import { makeAccessible } from '~utils/makeAccessible'; +import { getStyledProps } from '~components/Box/styledProps'; + +const Separator = ({ + size, + color, +}: Pick): React.ReactElement => { + return ( + + / + + ); +}; + +const listStyle = { listStyle: 'none' }; + +const Breadcrumb = ({ + size = 'medium', + color = 'primary', + showLastSeparator = false, + accessibilityLabel = 'Breadcrumb', + children, + ...styledProps +}: BreadcrumbProps): React.ReactElement => { + return ( + + + {React.Children.map(children, (child, index) => { + return ( + + {React.cloneElement(child as React.ReactElement, { _size: size, _color: color })} + + {index !== React.Children.count(children) - 1 && } + {index === React.Children.count(children) - 1 && showLastSeparator && ( + + )} + + + ); + })} + + + ); +}; + +export { Breadcrumb }; diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx new file mode 100644 index 00000000000..66f9d8e7761 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx @@ -0,0 +1,45 @@ +import type { BreadcrumbItemProps, BreadcrumbProps } from './types'; +import { BaseLink } from '~components/Link/BaseLink'; +import { Text } from '~components/Typography'; + +const BreadcrumbItem = ({ + _size, + _color, + children, + href, + icon, + isCurrentPage, + onClick, + accessibilityLabel, +}: BreadcrumbItemProps & { + _size?: BreadcrumbProps['size']; + _color?: BreadcrumbProps['color']; +}): React.ReactElement => { + if (isCurrentPage) { + return ( + + {children} + + ); + } + + return ( + + {children ?? ''} + + ); +}; + +export { BreadcrumbItem }; diff --git a/packages/blade/src/components/Breadcrumb/index.ts b/packages/blade/src/components/Breadcrumb/index.ts new file mode 100644 index 00000000000..c8f5f169de6 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/index.ts @@ -0,0 +1,3 @@ +export * from './Breadcrumb'; +export * from './BreadcrumbItem'; +export * from './types'; diff --git a/packages/blade/src/components/Breadcrumb/types.ts b/packages/blade/src/components/Breadcrumb/types.ts new file mode 100644 index 00000000000..346029c4daa --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/types.ts @@ -0,0 +1,64 @@ +import type { StyledPropsBlade } from '~components/Box/styledProps'; +import type { IconComponent } from '~components/Icons'; +import type { LinkProps } from '~components/Link'; + +type BreadcrumbProps = StyledPropsBlade & { + /** + * Size of the Breadcrumb + * + * @default medium + */ + size?: 'small' | 'medium' | 'large'; + /** + * Color of the Breadcrumb + * + * @default neutral + */ + color?: 'neutral' | 'primary' | 'white'; + /** + * Content of the Breadcrumb, accepts BreadcrumbItem + */ + children: React.ReactNode; + /** + * Whether to show the last separator + */ + showLastSeparator?: boolean; + /** + * aria-label for breadcrumb + */ + accessibilityLabel?: string; +}; + +type BreadcrumbItemProps = { + /** + * Href of the BreadcrumbItem + */ + href: string; + /** + * Function to be called on click of the BreadcrumbItem, + * + * This can be used to integrate with routing libraries like `react-router-dom` + */ + onClick?: LinkProps['onClick']; + /** + * Whether the BreadcrumbItem is the current page, + * Sets the aria-current attribute to `page` + * + * @default false + */ + isCurrentPage?: boolean; + /** + * Content of the BreadcrumbItem + */ + children?: string; + /** + * Icon to be shown before the BreadcrumbItem + */ + icon?: IconComponent; + /** + * Accessibility label for the BreadcrumbItem, can be used in icon only variant + */ + accessibilityLabel?: string; +}; + +export type { BreadcrumbProps, BreadcrumbItemProps }; diff --git a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx index 9c67be12828..0d4d1210dc1 100644 --- a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx +++ b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx @@ -78,6 +78,7 @@ type BaseLinkCommonProps = { * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native. */ htmlTitle?: string; + opacity: number; } & TestID & StyledPropsBlade & Omit; @@ -269,6 +270,7 @@ const _BaseLink: React.ForwardRefRenderFunction target, rel, color = 'primary', + opacity, accessibilityProps, // @ts-expect-error avoiding exposing to public className, @@ -394,6 +396,7 @@ const _BaseLink: React.ForwardRefRenderFunction flexDirection="row" className="content-container" alignItems="center" + opacity={opacity} > {Icon && iconPosition == 'left' ? ( From aa4e64b478e6608c49a4df2e716e38a0a572e102 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Wed, 21 Feb 2024 01:36:55 +0530 Subject: [PATCH 02/16] chore: add docs --- .../Breadcrumb/Breadcrumb.stories.tsx | 259 +++++++++++++++--- .../components/Breadcrumb/BreadcrumbItem.tsx | 28 +- 2 files changed, 245 insertions(+), 42 deletions(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index f500af42fe9..8b435b9d6c3 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -4,13 +4,20 @@ import { Title } from '@storybook/addon-docs'; import type { StoryFn, Meta } from '@storybook/react'; import React from 'react'; -import type { BreadcrumbProps } from './types'; +import type { LinkProps } from 'react-router-dom'; +import { useLocation, Link as RouterLink, matchPath, Route } from 'react-router-dom'; +import StoryRouter from 'storybook-react-router'; +import type { BreadcrumbItemProps, BreadcrumbProps } from './types'; import { Breadcrumb } from './Breadcrumb'; import { BreadcrumbItem } from './BreadcrumbItem'; import StoryPageWrapper from '~utils/storybook/StoryPageWrapper'; import { Sandbox } from '~utils/storybook/Sandbox'; import { Box } from '~components/Box'; import { HomeIcon } from '~components/Icons'; +import { Code, Text } from '~components/Typography'; +import { Card, CardBody, CardHeader, CardHeaderLeading } from '~components/Card'; +import { Link } from '~components/Link'; +import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; const Page = (): React.ReactElement => { return ( @@ -55,6 +62,17 @@ export default { title: 'Components/Breadcrumb', component: Breadcrumb, tags: ['autodocs'], + argTypes: { + ...getStyledPropsArgTypes(), + onDismiss: { action: 'Dismissed' }, + }, + args: { + size: 'medium', + color: 'primary', + showLastSeparator: false, + }, + // eslint-disable-next-line babel/new-cap + decorators: [StoryRouter(undefined, { initialEntries: ['/home'] })] as unknown, parameters: { docs: { page: Page, @@ -62,25 +80,80 @@ export default { }, } as Meta; -const BasicToastTemplate: StoryFn = () => { +const BasicToastTemplate: StoryFn = (props) => { return ( - - - + + + + Dashboard + + Settlements + + + + ); +}; + +BasicToastTemplate.storyName = 'Basic'; +export const Basic = BasicToastTemplate.bind({}); + +const BreadcrumbSizes: StoryFn = () => { + return ( + + + + Dashboard + + Settlements + + + + + Dashboard + + Settlements + + + + + Dashboard + + Settlements + + + + ); +}; + +BreadcrumbSizes.storyName = 'Sizes'; +export const Sizes = BreadcrumbSizes.bind({}); + +const BreadcrumbColors: StoryFn = () => { + return ( + + + Dashboard Settlements - + + + Dashboard Settlements - + + + Dashboard @@ -88,34 +161,154 @@ const BasicToastTemplate: StoryFn = () => { - - - Home - Dashboard - - Settlements - - - - Home - Dashboard - - Settlements - - - - - - Dashboard - - Settlements - - + + ); +}; + +BreadcrumbColors.storyName = 'Colors'; +export const Colors = BreadcrumbColors.bind({}); + +const urls = { + home: '/home', + dashboard: '/dashboard', + settlements: '/settlements', + payment: '/payment-gateway', +}; + +type BreadcrumbLinkProps = Omit & + BreadcrumbItemProps & { navigate: () => void }; + +const BreadcrumbLink = ({ onClick, ...props }: BreadcrumbLinkProps): React.ReactElement => { + const location = useLocation(); + + const isCurrentPage = + matchPath(location.pathname, { + path: props.href, + exact: true, + }) !== null; + + return ( + { + onClick?.(e as never); + e.preventDefault(); + props.navigate(); + }} + {...props} + /> + ); +}; + +const BreadcrumbNavLink = ( + props: Omit & LinkProps, +): React.ReactElement => { + return ; +}; + +const Page1 = (): React.ReactElement => { + return ( + + + Home + + + ); +}; + +const Page2 = (): React.ReactElement => { + return ( + + + Home + + + Dashboard + + + ); +}; + +const Page3 = (): React.ReactElement => { + return ( + + + Home + + + Dashboard + + + Settlements + + + ); +}; + +const Page4 = (): React.ReactElement => { + return ( + + + Home + + + Dashboard + + + Settlements + + + Payment Gateway + + + ); +}; + +const CommonPage = (): React.ReactElement => { + const location = useLocation(); + return ( + + + + + + + + You can use Breadcrumbs with{' '} + react-router to create a breadcrumb trail for your app. + + + Open this Codesandbox link to see the source code. + - + + Trigger URL Change: + + Home + Dashboard + Settlements + Payment Gateway + + + + ); +}; + +const RouterExample = (): React.ReactElement => { + return ( + + + + + + ); }; -BasicToastTemplate.storyName = 'Basic'; -export const Basic = BasicToastTemplate.bind({}); +const ReactRouterUsageTemplate: StoryFn = () => { + return ; +}; + +ReactRouterUsageTemplate.storyName = 'ReactRouterUsage'; +export const ReactRouterUsage = ReactRouterUsageTemplate.bind({}); diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx index 66f9d8e7761..b5c89d281a1 100644 --- a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx @@ -1,13 +1,14 @@ import type { BreadcrumbItemProps, BreadcrumbProps } from './types'; import { BaseLink } from '~components/Link/BaseLink'; import { Text } from '~components/Typography'; +import BaseBox from '~components/Box/BaseBox'; const BreadcrumbItem = ({ _size, _color, children, href, - icon, + icon: Icon, isCurrentPage, onClick, accessibilityLabel, @@ -16,14 +17,23 @@ const BreadcrumbItem = ({ _color?: BreadcrumbProps['color']; }): React.ReactElement => { if (isCurrentPage) { + const isWhite = _color === 'white'; return ( - - {children} - + + {Icon && ( + + )} + + {children} + + ); } @@ -32,7 +42,7 @@ const BreadcrumbItem = ({ size={_size} color={_color} opacity={_color !== 'primary' ? 0.5 : 1} - icon={icon} + icon={Icon} href={href} onClick={onClick} accessibilityProps={{ label: accessibilityLabel }} From e6cf07ec14939af15b95afe83c2de75f88968ff0 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Wed, 21 Feb 2024 14:02:43 +0530 Subject: [PATCH 03/16] chore: update native files --- .../src/components/Breadcrumb/Breadcrumb.native.tsx | 13 +++++++++++++ .../{Breadcrumb.tsx => Breadcrumb.web.tsx} | 0 .../components/Breadcrumb/BreadcrumbItem.native.tsx | 13 +++++++++++++ .../{BreadcrumbItem.tsx => BreadcrumbItem.web.tsx} | 0 .../blade/src/components/Link/BaseLink/BaseLink.tsx | 2 +- 5 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 packages/blade/src/components/Breadcrumb/Breadcrumb.native.tsx rename packages/blade/src/components/Breadcrumb/{Breadcrumb.tsx => Breadcrumb.web.tsx} (100%) create mode 100644 packages/blade/src/components/Breadcrumb/BreadcrumbItem.native.tsx rename packages/blade/src/components/Breadcrumb/{BreadcrumbItem.tsx => BreadcrumbItem.web.tsx} (100%) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.native.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.native.tsx new file mode 100644 index 00000000000..cd0aba1d8ce --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.native.tsx @@ -0,0 +1,13 @@ +import type { BreadcrumbProps } from './types'; +import { throwBladeError } from '~utils/logger'; + +const Breadcrumb = (_: BreadcrumbProps): React.ReactElement => { + throwBladeError({ + message: 'Breadcrumb is not yet implemented for native', + moduleName: 'Breadcrumb', + }); + + return <>; +}; + +export { Breadcrumb }; diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx similarity index 100% rename from packages/blade/src/components/Breadcrumb/Breadcrumb.tsx rename to packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.native.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.native.tsx new file mode 100644 index 00000000000..14ea0fae26f --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.native.tsx @@ -0,0 +1,13 @@ +import type { BreadcrumbItemProps } from './types'; +import { throwBladeError } from '~utils/logger'; + +const BreadcrumbItem = (_: BreadcrumbItemProps): React.ReactElement => { + throwBladeError({ + message: 'BreadcrumbItem is not yet implemented for native', + moduleName: 'BreadcrumbItem', + }); + + return <>; +}; + +export { BreadcrumbItem }; diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx similarity index 100% rename from packages/blade/src/components/Breadcrumb/BreadcrumbItem.tsx rename to packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx diff --git a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx index 0d4d1210dc1..b9a0a6547eb 100644 --- a/packages/blade/src/components/Link/BaseLink/BaseLink.tsx +++ b/packages/blade/src/components/Link/BaseLink/BaseLink.tsx @@ -78,7 +78,7 @@ type BaseLinkCommonProps = { * The title of the link which is displayed as a tooltip. This is a web only prop and has no effect on react-native. */ htmlTitle?: string; - opacity: number; + opacity?: number; } & TestID & StyledPropsBlade & Omit; From 1a8e1d0871b45975bf1d6af2e6e7e5cec17206dd Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 22 Feb 2024 15:01:46 +0530 Subject: [PATCH 04/16] refactor: use react context --- .../components/Breadcrumb/Breadcrumb.web.tsx | 75 ++++++++++--------- .../Breadcrumb/BreadcrumbContext.tsx | 10 +++ .../Breadcrumb/BreadcrumbItem.web.tsx | 25 +++---- 3 files changed, 63 insertions(+), 47 deletions(-) create mode 100644 packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx index 00fae34c966..326fdfd0f3b 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx @@ -1,6 +1,7 @@ /* eslint-disable react-native-a11y/has-valid-accessibility-role */ import React from 'react'; import type { BreadcrumbProps } from './types'; +import { BreadcrumbContext } from './BreadcrumbContext'; import BaseBox from '~components/Box/BaseBox'; import { Text } from '~components/Typography'; import { makeAccessible } from '~utils/makeAccessible'; @@ -22,7 +23,7 @@ const Separator = ({ ); }; -const listStyle = { listStyle: 'none' }; +const listStyleNone = { listStyle: 'none' }; const Breadcrumb = ({ size = 'medium', @@ -32,42 +33,48 @@ const Breadcrumb = ({ children, ...styledProps }: BreadcrumbProps): React.ReactElement => { + const contextValue = React.useMemo(() => ({ size, color }), [size, color]); + return ( - - {React.Children.map(children, (child, index) => { - return ( - - {React.cloneElement(child as React.ReactElement, { _size: size, _color: color })} - - {index !== React.Children.count(children) - 1 && } - {index === React.Children.count(children) - 1 && showLastSeparator && ( - - )} + + + {React.Children.map(children, (child, index) => { + const ariaCurrent = (child as React.ReactElement)?.props?.isCurrentPage + ? 'page' + : undefined; + + return ( + + {child} + + {index !== React.Children.count(children) - 1 && } + {index === React.Children.count(children) - 1 && showLastSeparator && ( + + )} + - - ); - })} - + ); + })} + + ); }; diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx new file mode 100644 index 00000000000..ade158efe70 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbContext.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import type { BreadcrumbProps } from './types'; + +type BreadcrumbContextValue = Pick; +const BreadcrumbContext = React.createContext({ + size: 'medium', + color: 'primary', +}); + +export { BreadcrumbContext }; diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx index b5c89d281a1..4f7ca269893 100644 --- a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx @@ -1,34 +1,33 @@ -import type { BreadcrumbItemProps, BreadcrumbProps } from './types'; +import React from 'react'; +import type { BreadcrumbItemProps } from './types'; +import { BreadcrumbContext } from './BreadcrumbContext'; import { BaseLink } from '~components/Link/BaseLink'; import { Text } from '~components/Typography'; import BaseBox from '~components/Box/BaseBox'; const BreadcrumbItem = ({ - _size, - _color, children, href, icon: Icon, isCurrentPage, onClick, accessibilityLabel, -}: BreadcrumbItemProps & { - _size?: BreadcrumbProps['size']; - _color?: BreadcrumbProps['color']; -}): React.ReactElement => { +}: BreadcrumbItemProps): React.ReactElement => { + const { color, size } = React.useContext(BreadcrumbContext); + if (isCurrentPage) { - const isWhite = _color === 'white'; + const isWhite = color === 'white'; return ( {Icon && ( )} {children} @@ -39,9 +38,9 @@ const BreadcrumbItem = ({ return ( Date: Thu, 22 Feb 2024 15:38:56 +0530 Subject: [PATCH 05/16] chore: add meta --- .../blade/src/components/Breadcrumb/Breadcrumb.web.tsx | 8 +++++++- packages/blade/src/utils/metaAttribute/metaConstants.ts | 2 ++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx index 326fdfd0f3b..3f4c5aad361 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx @@ -6,6 +6,7 @@ import BaseBox from '~components/Box/BaseBox'; import { Text } from '~components/Typography'; import { makeAccessible } from '~utils/makeAccessible'; import { getStyledProps } from '~components/Box/styledProps'; +import { metaAttribute, MetaConstants } from '~utils/metaAttribute'; const Separator = ({ size, @@ -36,7 +37,11 @@ const Breadcrumb = ({ const contextValue = React.useMemo(() => ({ size, color }), [size, color]); return ( - + {child} diff --git a/packages/blade/src/utils/metaAttribute/metaConstants.ts b/packages/blade/src/utils/metaAttribute/metaConstants.ts index a923bc74cca..e12f2ba7625 100644 --- a/packages/blade/src/utils/metaAttribute/metaConstants.ts +++ b/packages/blade/src/utils/metaAttribute/metaConstants.ts @@ -13,6 +13,8 @@ export const MetaConstants = { BaseBox: 'base-box', BaseText: 'base-text', Button: 'button', + Breadcrumb: 'breadcrumb', + BreadcrumbItem: 'breadcrumb-item', Carousel: 'carousel', Checkbox: 'checkbox', CheckboxGroup: 'checkbox-group', From 5b8857964996ffcdfb3775978fe5e97371f3068c Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 22 Feb 2024 16:55:14 +0530 Subject: [PATCH 06/16] chore: update docs --- .../Breadcrumb/Breadcrumb.stories.tsx | 28 ++++++++----------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index 8b435b9d6c3..9cd6bec9496 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -23,30 +23,24 @@ const Page = (): React.ReactElement => { return ( Usage {` - import { ToastContainer, useToast } from '@razorpay/blade/components'; + import { Box, Breadcrumb, BreadcrumbItem, HomeIcon } from '@razorpay/blade/components'; function App(): React.ReactElement { - const toast = useToast(); - - // Integrating Blade Toast in your App - // 1. Render the ToastContainer component at the root of your app - // 2. Utilize the methods exposed via useToast hook to show/dismiss toasts return ( - - - + + + + Dashboard + + Settlements + + ); } From 823ae6f079a1087ab2ab86275d671e1fb375c846 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 22 Feb 2024 16:55:33 +0530 Subject: [PATCH 07/16] chore: test --- packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index 9cd6bec9496..a3ba4d8a71c 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -58,7 +58,6 @@ export default { tags: ['autodocs'], argTypes: { ...getStyledPropsArgTypes(), - onDismiss: { action: 'Dismissed' }, }, args: { size: 'medium', From dca961410fb6d65df928094979012532ba1d19d2 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 22 Feb 2024 16:56:02 +0530 Subject: [PATCH 08/16] chore: reexport --- packages/blade/src/components/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts index 6add468277f..a84600bf861 100644 --- a/packages/blade/src/components/index.ts +++ b/packages/blade/src/components/index.ts @@ -5,6 +5,7 @@ export * from './Amount'; export * from './Badge'; export * from './BladeProvider'; export * from './BottomSheet'; +export * from './Breadcrumb'; export * from './Box'; export * from './Button'; export * from './Button/IconButton'; From 61889188226b94fb523fe5a3f67fa1eedc504ea3 Mon Sep 17 00:00:00 2001 From: Anurag Hazra Date: Thu, 22 Feb 2024 16:56:53 +0530 Subject: [PATCH 09/16] Create five-cows-cheer.md --- .changeset/five-cows-cheer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/five-cows-cheer.md diff --git a/.changeset/five-cows-cheer.md b/.changeset/five-cows-cheer.md new file mode 100644 index 00000000000..d4461a474e6 --- /dev/null +++ b/.changeset/five-cows-cheer.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": minor +--- + +feat(blade): breadcrumb web implementation From a42e7f63f2e91c4e22a883d2a6b4b825ea177a1a Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 22 Feb 2024 17:05:57 +0530 Subject: [PATCH 10/16] chore: add multiline example & fix spacing --- .../Breadcrumb/Breadcrumb.stories.tsx | 22 +++++++++++++++++++ .../components/Breadcrumb/Breadcrumb.web.tsx | 4 ++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index a3ba4d8a71c..b5501e495ab 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -161,6 +161,28 @@ const BreadcrumbColors: StoryFn = () => { BreadcrumbColors.storyName = 'Colors'; export const Colors = BreadcrumbColors.bind({}); +const BreadcrumbWrapMultilineTemplate: StoryFn = () => { + return ( + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + + + + ); +}; + +BreadcrumbWrapMultilineTemplate.storyName = 'BreadcrumbWrapMultiline'; +export const BreadcrumbWrapMultiline = BreadcrumbWrapMultilineTemplate.bind({}); + const urls = { home: '/home', dashboard: '/dashboard', diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx index 3f4c5aad361..4e3fd89c65f 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.web.tsx @@ -49,7 +49,7 @@ const Breadcrumb = ({ padding="spacing.0" display="flex" flexWrap="wrap" - gap="spacing.3" + gap="spacing.2" alignItems="center" style={listStyleNone} {...makeAccessible({ label: accessibilityLabel })} @@ -65,7 +65,7 @@ const Breadcrumb = ({ as="li" display="flex" alignItems="center" - gap="spacing.3" + gap="spacing.2" {...makeAccessible({ current: ariaCurrent })} {...metaAttribute({ name: MetaConstants.BreadcrumbItem })} > From 5f859bcb6a9e30fe97ca64ffc81126f14e9b4f7c Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Fri, 23 Feb 2024 17:49:20 +0530 Subject: [PATCH 11/16] chore: update --- .../Breadcrumb/Breadcrumb.stories.tsx | 40 +++++-------------- 1 file changed, 10 insertions(+), 30 deletions(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index b5501e495ab..12cb49abe12 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -224,9 +224,7 @@ const BreadcrumbNavLink = ( const Page1 = (): React.ReactElement => { return ( - - Home - + ); }; @@ -234,12 +232,8 @@ const Page1 = (): React.ReactElement => { const Page2 = (): React.ReactElement => { return ( - - Home - - - Dashboard - + + Dashboard ); }; @@ -247,15 +241,9 @@ const Page2 = (): React.ReactElement => { const Page3 = (): React.ReactElement => { return ( - - Home - - - Dashboard - - - Settlements - + + Dashboard + Settlements ); }; @@ -263,18 +251,10 @@ const Page3 = (): React.ReactElement => { const Page4 = (): React.ReactElement => { return ( - - Home - - - Dashboard - - - Settlements - - - Payment Gateway - + + Dashboard + Settlements + Payment Gateway ); }; From 4382990ec46051782eeefca0680ca399d567f8ee Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Mon, 26 Feb 2024 11:34:37 +0530 Subject: [PATCH 12/16] chore: update types --- packages/blade/src/components/Breadcrumb/types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Breadcrumb/types.ts b/packages/blade/src/components/Breadcrumb/types.ts index 346029c4daa..7bcb57a9f0f 100644 --- a/packages/blade/src/components/Breadcrumb/types.ts +++ b/packages/blade/src/components/Breadcrumb/types.ts @@ -1,6 +1,7 @@ import type { StyledPropsBlade } from '~components/Box/styledProps'; import type { IconComponent } from '~components/Icons'; import type { LinkProps } from '~components/Link'; +import type { StringChildrenType } from '~utils/types'; type BreadcrumbProps = StyledPropsBlade & { /** @@ -50,7 +51,7 @@ type BreadcrumbItemProps = { /** * Content of the BreadcrumbItem */ - children?: string; + children?: StringChildrenType; /** * Icon to be shown before the BreadcrumbItem */ From 56c323520e5f82a80cf0ed741aab636c20529970 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Wed, 28 Feb 2024 15:48:43 +0530 Subject: [PATCH 13/16] chore: update opacity token --- .../blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx index 4f7ca269893..5df63cbf85b 100644 --- a/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx +++ b/packages/blade/src/components/Breadcrumb/BreadcrumbItem.web.tsx @@ -4,6 +4,7 @@ import { BreadcrumbContext } from './BreadcrumbContext'; import { BaseLink } from '~components/Link/BaseLink'; import { Text } from '~components/Typography'; import BaseBox from '~components/Box/BaseBox'; +import { opacity } from '~tokens/global'; const BreadcrumbItem = ({ children, @@ -40,7 +41,7 @@ const BreadcrumbItem = ({ Date: Thu, 29 Feb 2024 11:07:01 +0530 Subject: [PATCH 14/16] test: add breadcrumb tests (#2029) * test: add breadcrumb tests * chore: add breadcrumb kitchen sink * chore: update snaos --- .../_KitchenSink.Breadcrumb.stories.tsx | 31 + .../__tests__/Breadcrumb.ssr.test.tsx | 20 + .../__tests__/Breadcrumb.web.test.tsx | 71 ++ .../Breadcrumb.ssr.test.tsx.snap | 293 +++++++ .../Breadcrumb.web.test.tsx.snap | 731 ++++++++++++++++++ 5 files changed, 1146 insertions(+) create mode 100644 packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx create mode 100644 packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx create mode 100644 packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx create mode 100644 packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap create mode 100644 packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap diff --git a/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx new file mode 100644 index 00000000000..9d4a4bbddc5 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/_KitchenSink.Breadcrumb.stories.tsx @@ -0,0 +1,31 @@ +import { composeStories } from '@storybook/react'; +import * as BreadcrumbStories from './Breadcrumb.stories'; +import { Box } from '~components/Box'; +import { Heading } from '~components/Typography'; + +const allStories = Object.values(composeStories(BreadcrumbStories)); + +export const Breadcrumb = (): JSX.Element => { + return ( + + {allStories.map((Story) => { + return ( + <> + {Story.storyName} + + + ); + })} + + ); +}; + +export default { + title: 'Components/KitchenSink/Breadcrumb', + component: Breadcrumb, + parameters: { + // enable Chromatic's snapshotting only for kitchensink + chromatic: { disableSnapshot: false }, + options: { showPanel: false }, + }, +}; diff --git a/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx new file mode 100644 index 00000000000..5712f9871c7 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.ssr.test.tsx @@ -0,0 +1,20 @@ +import { Breadcrumb, BreadcrumbItem } from '../'; +import { HomeIcon } from '~components/Icons'; +import renderWithSSR from '~utils/testing/renderWithSSR.web'; + +describe('', () => { + it('should render breadcrumb', () => { + const { container } = renderWithSSR( + + + Home + + About + + Contact + + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx new file mode 100644 index 00000000000..6c1e270c08e --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/Breadcrumb.web.test.tsx @@ -0,0 +1,71 @@ +import userEvent from '@testing-library/user-event'; +import { Breadcrumb, BreadcrumbItem } from '../'; +import renderWithTheme from '~utils/testing/renderWithTheme.web'; +import assertAccessible from '~utils/testing/assertAccessible.web'; + +describe('', () => { + it('should render', () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + expect(container).toMatchSnapshot(); + }); + + test('current item should have aria-current', () => { + const { container, getByText } = renderWithTheme( + + Home + About + + Contact + + , + ); + + expect(container).toMatchSnapshot(); + expect(getByText('Contact').closest('li')).toHaveAttribute('aria-current', 'page'); + }); + + test('should work with showLastSeparator', () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + expect(container).toMatchSnapshot(); + }); + + test('should work with onClick', async () => { + const onClick = jest.fn(); + const { getByText } = renderWithTheme( + + + Home + + , + ); + const link = getByText('Home'); + await userEvent.click(link); + expect(onClick).toHaveBeenCalledTimes(1); + }); + + it('should pass a11y render', async () => { + const { container } = renderWithTheme( + + Home + About + Contact + , + ); + + await assertAccessible(container); + }); +}); diff --git a/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap new file mode 100644 index 00000000000..b9896bdeaa2 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.ssr.test.tsx.snap @@ -0,0 +1,293 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render breadcrumb 1`] = `"
"`; + +exports[` should render breadcrumb 2`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-right: 4px; +} + +.c5.c5.c5.c5.c5 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c6.c6.c6.c6.c6 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c7.c7.c7.c7.c7 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 1rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.5rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; diff --git a/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap new file mode 100644 index 00000000000..982404e49b6 --- /dev/null +++ b/packages/blade/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.web.test.tsx.snap @@ -0,0 +1,731 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` current item should have aria-current 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c6.c6.c6.c6.c6 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; + +exports[` should render 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; + +exports[` should work with showLastSeparator 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0px; + margin: 0px; + gap: 4px; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 4px; +} + +.c3.c3.c3.c3.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + opacity: 1; +} + +.c4.c4.c4.c4.c4 { + color: hsla(227,71%,51%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + text-align: center; + margin: 0; + padding: 0; +} + +.c5.c5.c5.c5.c5 { + color: hsla(211,22%,56%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 500; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c2.c2.c2.c2.c2 { + padding: 0; + background-color: transparent; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + border: none; + cursor: pointer; + display: inline-block; + border-radius: 2px; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +.c2.c2.c2.c2.c2 .content-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + border-radius: 2px; +} + +.c2.c2.c2.c2.c2:focus-visible .content-container { + box-shadow: 0px 0px 0px 4px hsla(227,100%,59%,0.09); +} + +.c2.c2.c2.c2.c2 * { + -webkit-transition-property: color,fill; + transition-property: color,fill; + -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1); + transition-timing-function: cubic-bezier(0.3,0,0.2,1); + -webkit-transition-duration: 70ms; + transition-duration: 70ms; +} + +
+ +
+`; From 7bf6d745ad2c5ceb5410cdda308dcf271dd8a022 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 29 Feb 2024 11:30:08 +0530 Subject: [PATCH 15/16] chore: update story --- .../Breadcrumb/Breadcrumb.stories.tsx | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index 12cb49abe12..71f506df329 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -185,9 +185,10 @@ export const BreadcrumbWrapMultiline = BreadcrumbWrapMultilineTemplate.bind({}); const urls = { home: '/home', - dashboard: '/dashboard', - settlements: '/settlements', - payment: '/payment-gateway', + products: '/products', + payments: '/payments', + intPayments: '/international-payments', + acceptIntPayments: '/accepts-international-payments', }; type BreadcrumbLinkProps = Omit & @@ -233,7 +234,7 @@ const Page2 = (): React.ReactElement => { return ( - Dashboard + Products ); }; @@ -242,8 +243,8 @@ const Page3 = (): React.ReactElement => { return ( - Dashboard - Settlements + Products + Payments ); }; @@ -252,9 +253,23 @@ const Page4 = (): React.ReactElement => { return ( - Dashboard - Settlements - Payment Gateway + Products + Payments + International Payments + + ); +}; + +const Page5 = (): React.ReactElement => { + return ( + + + Products + Payments + International Payments + + Accept International Payments + ); }; @@ -279,10 +294,13 @@ const CommonPage = (): React.ReactElement => { Trigger URL Change: - Home - Dashboard - Settlements - Payment Gateway + Home + Products + Payments + International Payments + + Accept International Payments + @@ -293,9 +311,10 @@ const RouterExample = (): React.ReactElement => { return ( - - - + + + + ); From 5679436bedf8a03673e7b9b0e27313d9527d8699 Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Thu, 29 Feb 2024 11:51:56 +0530 Subject: [PATCH 16/16] chore: update code url --- .../blade/src/components/Breadcrumb/Breadcrumb.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx index 71f506df329..6fabac8d455 100644 --- a/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/blade/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -288,7 +288,9 @@ const CommonPage = (): React.ReactElement => { react-router to create a breadcrumb trail for your app. - Open this Codesandbox link to see the source code. + Open this{' '} + Stackblitz link to + see the source code.