docs: multiple docs UI fixes and unpkg installation link in installat…

…ion guide (#2041) * docs: fixes for old tokens, replace ArgsTable with internal table * fix: layout primitives fonts * feat: add link rel installation for no bundler tools * fix: remove commented code * fix: Badge prop * Update packages/blade/docs/guides/Installation.stories.mdx Co-authored-by: Nitin Kumar <snitin315@gmail.com> * Update packages/blade/docs/guides/Installation.stories.mdx Co-authored-by: Nitin Kumar <snitin315@gmail.com> * Update packages/blade/docs/guides/Usage.stories.mdx Co-authored-by: Nitin Kumar <snitin315@gmail.com> --------- Co-authored-by: Nitin Kumar <snitin315@gmail.com>
razorpay · Feb 23, 2024 · 9812ec5 · 9812ec5
1 parent f136d26
commit 9812ec5
Show file tree

Hide file tree

Showing 38 changed files with 190 additions and 149 deletions.
diff --git 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
+<link rel="stylesheet" href="https://unpkg.com/@razorpay/blade@<blade-version>/fonts.css" />
+<!-- 
+  Replace <blade-version> in the URL with the version of Blade you're using
+  E.g. https://unpkg.com/@razorpay/blade@11.3.1/fonts.css 
+-->
+```
+
 ### React Native Projects
 
 - Download fonts from <a href="https://github.com/razorpay/blade/tree/master/packages/blade/fonts/blade-fonts-react-native.zip">blade-fonts-react-native.zip</a> and unzip.

diff --git 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';
 </div>
 <br />
 
-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.
+
+<div style={{ textAlign: 'left' }}>
+  <iframe
+    width="560"
+    height="315"
+    src="https://www.youtube.com/embed/GH3HA6xOFEw?si=QLihQEyooEbtRPgg"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+    style={{ borderRadius: '8px' }}
+  ></iframe>
+</div>
 
 ## 💫 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
@@ -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
@@ -19,7 +19,7 @@ const Playground = `
 
   function App(): React.ReactElement {
     return (
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
         <ActionListItem
           leading={<ActionListItemIcon icon={UserIcon} />}
@@ -64,7 +64,7 @@ const ActionList = `
 
   function App(): React.ReactElement {
     return (
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
         <ActionListItem title="Mumbai" value="mumbai" />
         <ActionListItem title="Bangalore" value="bangalore" />
@@ -90,7 +90,7 @@ const ActionListItem = `
 
   function App(): React.ReactElement {
     return (
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
         <ActionListItem 
           title="Title"
@@ -123,7 +123,7 @@ const ActionListSection = `
 
   function App(): React.ReactElement {
     return (
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.intense">
       <ActionList>
         {/* You can multiple sections like this 👇🏼 */}
         <ActionListSection title="Account @blade">

diff --git 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 (
-            <Badge variant="neutral" icon={InfoIcon}>
+            <Badge color="neutral" icon={InfoIcon}>
               Boop
             </Badge>
           )

diff --git 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
@@ -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
@@ -127,16 +127,16 @@ function LayoutPrimitivesDocs(): React.ReactElement {
                   padding={{ base: ['spacing.1', '9px'], m: 'spacing.3' }}
                 >
                   <Box 
-                    backgroundColor="surface.background.level3.highContrast" 
+                    backgroundColor="surface.background.cloud.intense" 
                     flex="1" 
                   >
-                    <Text margin="spacing.4" contrast="high">Box1</Text>
+                    <Text margin="spacing.4" color="surface.text.onCloud.onIntense">Box1</Text>
                   </Box>
                   <Box 
-                    backgroundColor="surface.background.level2.highContrast" 
+                    backgroundColor="surface.background.sea.intense" 
                     flex="1" 
                   >
-                    <Text margin="spacing.4" contrast="high">Box2</Text>
+                    <Text margin="spacing.4" color="surface.text.onSea.onIntense">Box2</Text>
                   </Box>
                 </Box>
               )
@@ -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"
                     >
                       <Text>Some Text</Text>
                     </Box>
@@ -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'
                       >
                         <Text>More Text</Text>
                       </Box>
@@ -252,17 +252,17 @@ function LayoutPrimitivesDocs(): React.ReactElement {
                   >
                     <Box
                       flex="1"
-                      backgroundColor="surface.background.level2.highContrast"
+                      backgroundColor="surface.background.cloud.intense"
                       padding="spacing.4" 
                     >
-                      <Text contrast="high">Box1</Text>
+                      <Text color="surface.text.onCloud.onIntense">Box1</Text>
                     </Box>
                     <Box 
                       flex="1" 
-                      backgroundColor="surface.background.level3.highContrast" 
+                      backgroundColor="surface.background.sea.intense" 
                       padding="spacing.4" 
                     >
-                      <Text contrast="high">Box2</Text>
+                      <Text color="surface.text.onSea.onIntense">Box2</Text>
                     </Box>
                   </Box>
                 </>

diff --git 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 (
-    <Box backgroundColor="surface.background.level2.lowContrast">
+    <Box backgroundColor="surface.background.gray.moderate">
       <Button {...args}>Blade Button</Button>
     </Box>
   );

diff --git 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 (
     <Box
       padding="spacing.5"
-      backgroundColor="surface.background.level3.lowContrast"
+      backgroundColor="surface.background.gray.moderate"
       width="100%"
       minHeight="100px"
       overflow="scroll"
@@ -327,7 +327,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
     <Box>
       <Box
         padding="spacing.5"
-        backgroundColor="surface.background.level3.lowContrast"
+        backgroundColor="surface.background.gray.moderate"
         width="100%"
         minHeight="100px"
         overflow="scroll"
@@ -344,7 +344,7 @@ export const InternalAutoPositioning = (): React.ReactElement => {
       </Box>
       <Box
         padding="spacing.5"
-        backgroundColor="surface.background.level3.lowContrast"
+        backgroundColor="surface.background.gray.moderate"
         width="100%"
         position="fixed"
         bottom="spacing.0"

diff --git a/packages/blade/src/components/Dropdown/docs/stories.ts b/packages/blade/src/components/Dropdown/docs/stories.ts
@@ -623,7 +623,7 @@ const WithAutoPositioningSelectStory = `
       <Box>
         <Box
           padding="spacing.5"
-          backgroundColor="surface.background.level3.lowContrast"
+          backgroundColor="surface.background.gray.moderate"
           width="100%"
           minHeight="100px"
           overflow="scroll"
@@ -640,7 +640,7 @@ const WithAutoPositioningSelectStory = `
         </Box>
         <Box
           padding="spacing.5"
-          backgroundColor="surface.background.level3.lowContrast"
+          backgroundColor="surface.background.gray.moderate"
           width="100%"
           position="fixed"
           bottom="spacing.0"

diff --git a/packages/blade/src/components/Link/Link/Link.stories.tsx b/packages/blade/src/components/Link/Link/Link.stories.tsx
@@ -162,7 +162,7 @@ const LinkColorsTemplate: StoryFn<typeof LinkComponent> = ({ icon, children = ''
           {children}
         </LinkComponent>
       </BaseBox>
-      <BaseBox padding="spacing.2" backgroundColor="brand.gray.700.lowContrast">
+      <BaseBox padding="spacing.2" backgroundColor="surface.background.cloud.intense">
         <LinkComponent {...args} color="white">
           {children}
         </LinkComponent>

diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx
@@ -299,15 +299,15 @@ const ListWithListItemTextTemplate: StoryFn<typeof List> = () => {
             <ListItem>
               <ListItemText>
                 You will receive an invoice after a
-                <ListItemText as="span" weight="bold" color="feedback.text.positive.lowContrast">
+                <ListItemText as="span" weight="semibold" color="feedback.text.positive.intense">
                   {' successful '}
                 </ListItemText>
                 payment
               </ListItemText>
             </ListItem>
             <ListItem>
               You will receive a mail with further instruction after a
-              <ListItemText as="span" weight="bold" color="feedback.text.negative.lowContrast">
+              <ListItemText as="span" weight="semibold" color="feedback.text.negative.intense">
                 {' failed '}
               </ListItemText>{' '}
               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
@@ -187,7 +187,7 @@ const MyCustomTriggerButton = React.forwardRef<
   return (
     // just spread the props
     <BaseBox
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       borderRadius="medium"
       role="button"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableAPI.stories.tsx
@@ -98,7 +98,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableBodyAPI.stories.tsx
@@ -71,7 +71,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableCellAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableCellAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableFooterAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableFooterCellAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableFooterRowAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableHeaderAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableHeaderCellAPI.stories.tsx
@@ -82,7 +82,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableHeaderRowAPI.stories.tsx
@@ -77,7 +77,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TablePaginationAPI.stories.tsx
@@ -76,7 +76,7 @@ const TableTemplate: StoryFn<typeof TableComponent> = ({ ...args }) => {
 
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"

diff --git a/packages/blade/src/components/Table/docs/APIStories/TableRowAPI.stories.tsx b/packages/blade/src/components/Table/docs/APIStories/TableRowAPI.stories.tsx
@@ -82,7 +82,7 @@ const data: TableData<Item> = {
 const TableTemplate: StoryFn<typeof TableRow> = ({ ...args }) => {
   return (
     <Box
-      backgroundColor="surface.background.level2.lowContrast"
+      backgroundColor="surface.background.gray.intense"
       padding="spacing.5"
       overflow="auto"
       minHeight="400px"