diff --git a/packages/blade/docs/guides/Installation.stories.mdx b/packages/blade/docs/guides/Installation.stories.mdx index e9e4d682763..dd2d874d57b 100644 --- a/packages/blade/docs/guides/Installation.stories.mdx +++ b/packages/blade/docs/guides/Installation.stories.mdx @@ -126,6 +126,18 @@ We use 2 fonts. [TASA Orbiter](https://tasatype.localremote.co/) (for our headin `; ``` +#### No Bundler Setups or No Code Tools + +If your project uses a no-bundler setup or is a no-code tool, you can install fonts with `unpkg` link + +```html + + +``` + ### React Native Projects - Download fonts from blade-fonts-react-native.zip and unzip. diff --git a/packages/blade/docs/guides/Intro.stories.mdx b/packages/blade/docs/guides/Intro.stories.mdx index 54c3849eda8..2ddef9bf3f6 100644 --- a/packages/blade/docs/guides/Intro.stories.mdx +++ b/packages/blade/docs/guides/Intro.stories.mdx @@ -27,7 +27,22 @@ import { Meta } from '@storybook/addon-docs';
-Blade is the Design System that powers [Razorpay](https://razorpay.com/) +## What is Blade? + +Blade is the Cross-Platform, Open Source Design System that powers all of the [Razorpay](https://razorpay.com/) Products. + +
+ +
## 💫 Blade Rebranded @@ -40,6 +55,7 @@ Blade is the Design System that powers [Razorpay](https://razorpay.com/) ## 🔗 Links - [Docs](https://blade.razorpay.com) +- [Figma Library](https://www.figma.com/community/file/1341658976127676210) - [Installation](https://blade.razorpay.com/?path=/docs/guides-installation--page) - [@razorpay/blade-old](https://github.com/razorpay/blade-old) (Deprecated, Private) diff --git a/packages/blade/docs/guides/Usage.stories.mdx b/packages/blade/docs/guides/Usage.stories.mdx index 764366381c9..278a18c5ca1 100644 --- a/packages/blade/docs/guides/Usage.stories.mdx +++ b/packages/blade/docs/guides/Usage.stories.mdx @@ -90,17 +90,14 @@ Let's see how you can spot a token name from figma and write it in your code Whenever you get a UI mockup handed over by your designer 1. Select the component whose color token you want to use in code up -2. Click on the inspect panel on the left and click on the token name `Surface/Background/Level3/lowContrast`. +2. Click on the inspect panel on the left and click on the token name `surface.background.gray.moderate` to copy it and paste it into your code. > Remember, don't select the hardcoded `hsla` color value. -3. Now in your code paste this token and replace slashes **`/`** with **`.`** - > `Surface/Background/Level3/lowContrast` ➡️ `surface.background.level3.lowContrast` ```jsx const StyledCard = styled.div( ({ theme }: { theme: Theme }) => ` width: 368px; - /* Surface/Background/Level3/lowContrast */ - background-color: ${theme.colors.surface.background.level3.lowContrast}; + background-color: ${theme.colors.surface.background.gray.moderate}; `, ); ``` diff --git a/packages/blade/src/components/ActionList/docs/stories.ts b/packages/blade/src/components/ActionList/docs/stories.ts index b165125290d..89aeb39521d 100644 --- a/packages/blade/src/components/ActionList/docs/stories.ts +++ b/packages/blade/src/components/ActionList/docs/stories.ts @@ -19,7 +19,7 @@ const Playground = ` function App(): React.ReactElement { return ( - + } @@ -64,7 +64,7 @@ const ActionList = ` function App(): React.ReactElement { return ( - + @@ -90,7 +90,7 @@ const ActionListItem = ` function App(): React.ReactElement { return ( - + + {/* You can multiple sections like this 👇🏼 */} diff --git a/packages/blade/src/components/Badge/Badge.stories.tsx b/packages/blade/src/components/Badge/Badge.stories.tsx index 9551fc4813f..02418480745 100644 --- a/packages/blade/src/components/Badge/Badge.stories.tsx +++ b/packages/blade/src/components/Badge/Badge.stories.tsx @@ -24,7 +24,7 @@ const Page = (): React.ReactElement => { function App(): React.ReactElement { return ( - + Boop ) diff --git a/packages/blade/src/components/Box/BaseBox/BaseBox.internal.stories.tsx b/packages/blade/src/components/Box/BaseBox/BaseBox.internal.stories.tsx index b195f3fb91d..c8836032fe7 100644 --- a/packages/blade/src/components/Box/BaseBox/BaseBox.internal.stories.tsx +++ b/packages/blade/src/components/Box/BaseBox/BaseBox.internal.stories.tsx @@ -44,7 +44,7 @@ export const Responsive = (args: BaseBoxProps): React.ReactElement => { Responsive.args = { display: 'flex', padding: { base: ['spacing.10', 'spacing.3'], l: 'spacing.3' }, - backgroundColor: 'surface.background.level2.lowContrast', + backgroundColor: 'surface.background.gray.moderate', flexDirection: { base: 'column', l: 'row' }, } as BaseBoxProps; diff --git a/packages/blade/src/components/Box/Box.stories.tsx b/packages/blade/src/components/Box/Box.stories.tsx index 0db8bb1749d..02c23a21f48 100644 --- a/packages/blade/src/components/Box/Box.stories.tsx +++ b/packages/blade/src/components/Box/Box.stories.tsx @@ -57,7 +57,7 @@ export const Default = (args: BoxProps): React.ReactElement => { Default.args = { padding: { base: 'spacing.2', m: 'spacing.10' }, - backgroundColor: 'surface.background.level1.lowContrast', + backgroundColor: 'surface.background.gray.intense', } as BoxProps; export const Responsive = (args: BoxProps): React.ReactElement => { @@ -107,7 +107,7 @@ export const Elevations = (args: BoxProps): React.ReactElement => { Elevations.args = { padding: 'spacing.8', - backgroundColor: 'surface.background.level2.lowContrast', + backgroundColor: 'surface.background.gray.moderate', borderRadius: 'large', } as BoxProps; diff --git a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx index 5e72c87b289..287853adcbb 100644 --- a/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx +++ b/packages/blade/src/components/Box/LayoutPrimitivesDocs.tsx @@ -127,16 +127,16 @@ function LayoutPrimitivesDocs(): React.ReactElement { padding={{ base: ['spacing.1', '9px'], m: 'spacing.3' }} > - Box1 + Box1 - Box2 + Box2 ) @@ -192,7 +192,7 @@ function LayoutPrimitivesDocs(): React.ReactElement { // Uncomment next lines to see padding and margin in action // padding="spacing.4" // marginTop="32px" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" > Some Text @@ -201,7 +201,7 @@ function LayoutPrimitivesDocs(): React.ReactElement { // Uncomment this block to see padding shorthands in action padding={["spacing.3", "35px"]} // We also support padding and margin shorthands similar to CSS marginX="spacing.5" // adds horizontal margin - backgroundColor='surface.background.level3.lowContrast' + backgroundColor='surface.background.gray.moderate' > More Text @@ -252,17 +252,17 @@ function LayoutPrimitivesDocs(): React.ReactElement { > - Box1 + Box1 - Box2 + Box2 diff --git a/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx b/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx index 864f92e9d87..9b0a606b794 100644 --- a/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx +++ b/packages/blade/src/components/Box/styledProps/StyledProps.stories.tsx @@ -52,7 +52,7 @@ const BoxStoryMeta = { export const StyledProps = (args: StyledPropsType): React.ReactElement => { return ( - + ); diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx index 6b8f8d86d31..72bdb7b99cc 100644 --- a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx +++ b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx @@ -281,7 +281,7 @@ export const InternalSelect = (): React.ReactElement => { return ( { { = ({ icon, children = '' {children} - + {children} diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx index 6b86b68d566..071bbcb485a 100644 --- a/packages/blade/src/components/List/List.stories.tsx +++ b/packages/blade/src/components/List/List.stories.tsx @@ -299,7 +299,7 @@ const ListWithListItemTextTemplate: StoryFn = () => { You will receive an invoice after a - + {' successful '} payment @@ -307,7 +307,7 @@ const ListWithListItemTextTemplate: StoryFn = () => { You will receive a mail with further instruction after a - + {' failed '} {' '} payment diff --git a/packages/blade/src/components/Popover/__tests__/Popover.test.stories.tsx b/packages/blade/src/components/Popover/__tests__/Popover.test.stories.tsx index 82af3a52cc8..d0c4d0c863a 100644 --- a/packages/blade/src/components/Popover/__tests__/Popover.test.stories.tsx +++ b/packages/blade/src/components/Popover/__tests__/Popover.test.stories.tsx @@ -187,7 +187,7 @@ const MyCustomTriggerButton = React.forwardRef< return ( // just spread the props = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = ({ ...args }) => { return ( = { const TableTemplate: StoryFn = ({ ...args }) => { return ( = ({ ...args }) => { return ( = ({ ...args }) => { return ( = { component: DisplayComponent, args: { size: 'small', - type: 'normal', children: 'Power your finance, grow your business', - contrast: 'low', as: undefined, }, tags: ['autodocs'], @@ -77,7 +75,7 @@ export default DisplayStoryMeta; export const Display = DisplayTemplate.bind({}); export const WithColor = DisplayTemplate.bind({}); WithColor.args = { - color: 'brand.primary.500', + color: 'surface.text.primary.normal', }; const Sup = isReactNative() ? DisplayComponent : 'sup'; @@ -86,13 +84,13 @@ const WithMixedColorsTemplate: StoryFn = (args) => { Supercharge your business with the all‑powerful{' '} - + Payment Gateway Start accepting{' '} - + payments {' '} at just 2% * @@ -108,7 +106,7 @@ const AsPropTemplate: StoryFn = (args) => { By default{' '} - + Display {' '} component automatically renders the h1 tag. diff --git a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx index 18dd2bba4f8..5dae9615e30 100644 --- a/packages/blade/src/components/Typography/Heading/Heading.stories.tsx +++ b/packages/blade/src/components/Typography/Heading/Heading.stories.tsx @@ -47,15 +47,12 @@ const getHeadingArgTypes = (): Meta['argTypes'] => { }; }; -const HeadingStoryMeta: Meta> = { +const HeadingStoryMeta: Meta = { title: 'Components/Typography/Heading', component: HeadingComponent, args: { - variant: 'regular', - type: 'normal', children: 'Get Started With Payment Gateway', - weight: 'bold', - contrast: 'low', + weight: 'semibold', as: undefined, }, tags: ['autodocs'], @@ -75,7 +72,7 @@ export default HeadingStoryMeta; export const Heading = HeadingTemplate.bind({}); export const WithColor = HeadingTemplate.bind({}); WithColor.args = { - color: 'feedback.notice.action.text.primary.default.lowContrast', + color: 'surface.text.primary.normal', }; const Sup = isReactNative() ? HeadingComponent : 'sup'; @@ -84,13 +81,13 @@ const WithMixedColorsTemplate: StoryFn = () => { Supercharge your business with the all‑powerful{' '} - + Payment Gateway Start accepting{' '} - + payments {' '} at just 2% * @@ -106,12 +103,12 @@ const AsPropTemplate: StoryFn = (args) => { By default{' '} - + Heading {' '} component automatically renders the respective h* tag based on the{' '} - + size prop {' '} passed diff --git a/packages/blade/src/components/Typography/Text/Text.stories.tsx b/packages/blade/src/components/Typography/Text/Text.stories.tsx index 6ef1739ff65..97d34fd5fcb 100644 --- a/packages/blade/src/components/Typography/Text/Text.stories.tsx +++ b/packages/blade/src/components/Typography/Text/Text.stories.tsx @@ -40,11 +40,9 @@ const TextStoryMeta: Meta> = { variant: 'body', weight: 'regular', size: 'medium', - type: 'normal', children: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc', truncateAfterLines: 3, - contrast: 'low', as: undefined, }, parameters: { @@ -64,18 +62,18 @@ export default TextStoryMeta; export const Text = TextTemplate.bind({}); export const WithColor = TextTemplate.bind({}); WithColor.args = { - color: 'feedback.positive.action.text.primary.default.lowContrast', + color: 'surface.text.primary.normal', }; const AsPropTemplate: StoryFn = (args) => { return ( Power your{' '} - + finance , grow your{' '} - + business diff --git a/packages/blade/src/utils/lodashButBetter/get.ts b/packages/blade/src/utils/lodashButBetter/get.ts index 1ffe02a8095..13e089e1146 100644 --- a/packages/blade/src/utils/lodashButBetter/get.ts +++ b/packages/blade/src/utils/lodashButBetter/get.ts @@ -5,7 +5,7 @@ import type { EasingType } from '~tokens/global/motion'; /** * @template TokenType token type generic - * @description Tokenises objects to dot notation strings, eg: `surface.text.normal.lowContrast` + * @description Tokenises objects to dot notation strings, eg: `surface.text.gray.normal` */ export type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = { [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles diff --git a/packages/blade/src/utils/storybook/ArgsTable.tsx b/packages/blade/src/utils/storybook/ArgsTable.tsx index 30ce788ad10..c27f3933453 100644 --- a/packages/blade/src/utils/storybook/ArgsTable.tsx +++ b/packages/blade/src/utils/storybook/ArgsTable.tsx @@ -1,28 +1,16 @@ -import styled from 'styled-components'; +import { Box } from '~components/Box'; import type { BaseBoxProps } from '~components/Box/BaseBox'; -import BaseBox from '~components/Box/BaseBox'; +import { + Table, + TableBody, + TableCell, + TableHeader, + TableHeaderCell, + TableHeaderRow, + TableRow, +} from '~components/Table'; import { Code, Text } from '~components/Typography'; -const StyledArgsTable = styled(BaseBox)( - (props) => ` - font-family: ${props.theme.typography.fonts.family.text}; - text-align: left; - min-width: 500px; - - &, - & th, - & td { - border: 1px solid ${props.theme.colors.surface.border.gray.normal}; - border-collapse: collapse; - } - - & td, - & th { - padding: ${props.theme.spacing[3]}px; - } -`, -); - const ArgsTable = ({ data, marginBottom = 'spacing.8', @@ -32,44 +20,60 @@ const ArgsTable = ({ marginBottom?: BaseBoxProps['marginBottom']; marginTop?: BaseBoxProps['marginTop']; }): JSX.Element => { - return ( - - - - Prop - - - Type - - - {Object.entries(data).map(([propName, propType]) => { - const isTypeObject = typeof propType === 'object' && 'note' in propType; - const propNote = isTypeObject ? `(${propType.note})` : undefined; - const propTypeJSX = (() => { - if (typeof propType === 'string') { - return {propType}; - } + const nodes = Object.entries(data).map(([prop, type], index) => { + return { + id: index, + prop, + type, + }; + }); - if (isTypeObject) { - return {propType.type}; - } + return ( +
+ + + {(tableData) => ( + <> + + + Prop + Type + + + + {tableData.map((tableItem, index) => { + const propType = tableItem.type; + const isTypeObject = typeof propType === 'object' && 'note' in propType; + const propNote = isTypeObject ? `(${propType.note})` : undefined; + const propTypeJSX = (() => { + if (typeof propType === 'string') { + return {propType}; + } - return propType; - })(); + if (isTypeObject) { + return {propType.type}; + } - return ( - - + return propType; + })(); - - - ); - })} - + return ( + + + + {tableItem.prop} {propNote} + + + {propTypeJSX} + + ); + })} + + + )} +
- - {propName} {propNote} - - {propTypeJSX}
+ +
); }; diff --git a/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx b/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx index c183430dbba..c1312b9c6a2 100644 --- a/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx +++ b/packages/blade/src/utils/storybook/Sandbox/SandpackEditor/Sandbox.web.tsx @@ -44,7 +44,7 @@ const useSandpackSetup = ({ }; }; -const CodeLineHighlighterContainer = styled(BaseBox)((_props) => ({ +const CodeLineHighlighterContainer = styled(BaseBox)((props) => ({ '& .highlight': { backgroundColor: '#fffbdd', borderRadius: '2px', @@ -55,6 +55,7 @@ const CodeLineHighlighterContainer = styled(BaseBox)((_props) => ({ }, borderRadius: '4px', overflow: 'auto', + fontFamily: props.theme.typography.fonts.family.code, })); const SandboxHighlighter = ({ @@ -63,7 +64,7 @@ const SandboxHighlighter = ({ ...sandpackCodeViewerProps }: { children: string; theme?: 'light' | 'dark' } & CodeViewerProps): JSX.Element => { return ( - + { const sandboxSetup = useSandpackSetup({ language, code }); return ( - + {children} ); }; +const StyledSandpack = styled(BaseBox)((props) => { + return { + fontFamily: props.theme.typography.fonts.family.code, + }; +}); + function Sandbox({ children, language = 'tsx', @@ -106,7 +113,7 @@ function Sandbox({ const sandpackSetup = useSandpackSetup({ language, code: children }); return ( - + - + ); } diff --git a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx index 6f23af41849..7f81c742211 100644 --- a/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx +++ b/packages/blade/src/utils/storybook/Sandbox/StackblitzEditor/Sandbox.web.tsx @@ -21,10 +21,12 @@ const useStackblitzSetup = ({ code, editorHeight, showConsole, + sandboxRef, }: { code: SandboxStackBlitzProps['children']; editorHeight: SandboxStackBlitzProps['editorHeight']; showConsole: SandboxStackBlitzProps['showConsole']; + sandboxRef: React.RefObject; }): Project => { const docsContext = React.useContext(DocsContext); @@ -70,16 +72,23 @@ const useStackblitzSetup = ({ }, [colorScheme, brandColor]); React.useEffect(() => { - void sdk.embedProject('sb-embed', stackblitzProject, { - height: editorHeight, - openFile: 'App.tsx', - terminalHeight: 0, - hideDevTools: true, - hideNavigation: true, - hideExplorer: true, - theme: 'light', - showSidebar: false, - }); + if (sandboxRef.current) { + sdk + .embedProject(sandboxRef.current, stackblitzProject, { + height: editorHeight, + openFile: 'App.tsx', + terminalHeight: 0, + hideDevTools: true, + hideNavigation: true, + hideExplorer: true, + theme: 'light', + showSidebar: false, + }) + .catch((err) => { + console.error(err); + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [colorScheme, brandColor]); @@ -102,10 +111,13 @@ export const Sandbox = ({ showConsole = false, padding = ['spacing.5', 'spacing.0', 'spacing.8'], }: SandboxStackBlitzProps): JSX.Element => { + const sandboxRef = React.useRef(null); + useStackblitzSetup({ code: children, editorHeight, showConsole, + sandboxRef, }); return ( @@ -114,7 +126,7 @@ export const Sandbox = ({ // Stackblitz is unable to handle string types of height correctly so we set them on styled-components editorHeight={typeof editorHeight !== 'number' ? editorHeight : undefined} > -
+
); }; diff --git a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts index 5445523c41a..ea2511db951 100644 --- a/packages/blade/src/utils/storybook/Sandbox/baseCode.ts +++ b/packages/blade/src/utils/storybook/Sandbox/baseCode.ts @@ -187,8 +187,8 @@ export const Logger = () => { margin="spacing.4" elevation="midRaised" borderRadius="round" - backgroundColor="surface.background.level3.lowContrast" - borderColor="surface.border.normal.lowContrast" + backgroundColor="surface.background.gray.moderate" + borderColor="surface.border.gray.normal" display={showLogger ? 'inline-block' : 'none'} > { overflow="auto" height="30vh" elevation="highRaised" - backgroundColor="surface.background.level2.lowContrast" + backgroundColor="surface.background.gray.intense" id="log-console" ref={consoleRef} display={showLogger ? 'block' : 'none'} textAlign="left" borderTopWidth="thin" - borderTopColor="surface.border.normal.lowContrast" + borderTopColor="surface.border.gray.normal" /> @@ -277,7 +277,7 @@ root.render( = { [K in keyof TokenType]: `${Extract}.${TokenType[K] extends Record<