Skip to content

Commit

Permalink
chore: fix storybook embed links (#1998)
Browse files Browse the repository at this point in the history
  • Loading branch information
anuraghazra authored Jan 30, 2024
1 parent 27fe572 commit 03a37be
Show file tree
Hide file tree
Showing 37 changed files with 73 additions and 78 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Page = (): ReactElement => {
<StoryPageWrapper
componentName="Accordion"
componentDescription="An accordion is used to allow users to toggle between different content sections in a compact vertical stack."
figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73183-42793&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const Page = (): React.ReactElement => {
<StoryPageWrapper
componentName="ActionList"
componentDescription="ActionList contains list of ActionList Items with or without in sections to perform particular actions."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=76148-71527&mode=design&t=JkDSnlo8KJOBJimR-0"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Alert/Alert.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Page = (): ReactElement => {
<StoryPageWrapper
componentName="Alert"
componentDescription="Alerts are messages that communicate information to users about any significant changes or explanations inside the system in a prominent way."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=6922%3A17789"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73820-506596&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Amount/Amount.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import { objectKeysWithType } from '~utils/objectKeysWithType';
const Page = (): React.ReactElement => {
return (
<StoryPageWrapper
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28012%3A580578&t=WfWp7qiwZ3lvvbdw-0"
componentName="Amount"
componentDescription="Amounts are used to show small amount of color coded metadata, which are ideal for getting user attention."
note="This component only displays the provided value in the specified currency, it does not perform any currency conversion."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73328-558626&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Badge/Badge.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
const Page = (): React.ReactElement => {
return (
<StoryPageWrapper
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8110%3A417"
componentName="Badge"
componentDescription="Badges are used to show small amount of color coded metadata, which are ideal for getting user attention."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73237-214550&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@ const HeaderContainer = ({ children }: { children: BoxProps['children'] }): Reac

export const BaseHeaderKitchenSink = (): React.ReactElement => {
return (
<Box
backgroundColor="surface.background.level2.lowContrast"
maxWidth={{ base: '100%', m: '500px' }}
>
<Box backgroundColor="surface.background.gray.intense" maxWidth={{ base: '100%', m: '500px' }}>
<HeaderContainer>
<BaseHeader
title="Simple BaseHeader"
Expand All @@ -29,10 +26,10 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
</HeaderContainer>
<HeaderContainer>
<BaseHeader
leading={<StarIcon color="surface.text.normal.lowContrast" size="large" />}
leading={<StarIcon color="surface.icon.gray.normal" size="large" />}
title="When The Title is So Large That It Goes On Next Line"
subtitle="Header Subtitle"
titleSuffix={<Badge variant="positive">New</Badge>}
titleSuffix={<Badge color="positive">New</Badge>}
trailing={<Amount value={1000} />}
showCloseButton={false}
showBackButton={false}
Expand All @@ -49,10 +46,10 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
</HeaderContainer>
<HeaderContainer>
<BaseHeader
leading={<StarIcon color="surface.text.normal.lowContrast" size="large" />}
leading={<StarIcon color="surface.icon.gray.normal" size="large" />}
title="When The Title is So Large That It Goes On Next Line"
subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line"
titleSuffix={<Badge variant="positive">New</Badge>}
titleSuffix={<Badge color="positive">New</Badge>}
trailing={<Amount value={1000} />}
showCloseButton={true}
showBackButton={true}
Expand All @@ -72,7 +69,7 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
}
title="When The Title is So Large That It Goes On Next Line"
subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line"
titleSuffix={<Badge variant="positive">New</Badge>}
titleSuffix={<Badge color="positive">New</Badge>}
trailing={<Amount value={1000} />}
showCloseButton={true}
showBackButton={true}
Expand All @@ -84,10 +81,7 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {

export const BaseFooterSink = (): React.ReactElement => {
return (
<Box
backgroundColor="surface.background.level2.lowContrast"
maxWidth={{ base: '100%', m: '500px' }}
>
<Box backgroundColor="surface.background.gray.intense" maxWidth={{ base: '100%', m: '500px' }}>
<BaseFooter>
<Button isFullWidth>Submit</Button>
</BaseFooter>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const Page = (): React.ReactElement => {
BottomSheetHeaderProps
} from '@razorpay/blade/components';
`}
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=26477-578228&t=agFItKEmWAzA4N13-0"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=25045-554566&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Heading size="large">Usage</Heading>
<Sandbox showConsole editorHeight={600}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Page = (): ReactElement => {
<StoryPageWrapper
componentDescription="This is the Button component which can be used for various CTAs. It is available in 3 different variants."
componentName="Button"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=5200%3A0"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=58628-55173&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox showConsole>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Page = (): ReactElement => {
componentName="IconButton"
componentDescription="Useful for making clickable icons. For example - close button for modals, inputs, etc."
apiDecisionLink={null}
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12702%3A149930&t=IyyhF89aEgTcRBzk-4"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71108-309592&mode=design&t=JkDSnlo8KJOBJimR-4"
>
<Title>Usage</Title>
<Sandbox showConsole>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Card/Card.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Page = (): React.ReactElement => {
<StoryPageWrapper
componentName="Card"
componentDescription="Cards are used to group similar concepts and tasks together to make easier for merchants to scan, read, and get things done. In simpler words Cards help seprates content into sections. They are the surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=72099-253612&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Page = (): React.ReactElement => {
<StoryPageWrapper
componentName="Carousel"
componentDescription="Carousel is a UI component that allows the display and navigation of a set of content items, typically images or cards, within a limited space. It is often used to showcase multiple pieces of content in a visually appealing and interactive way."
figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2115-975755&mode=design&t=5g2Lqj2ez02pxQfO-0"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=53853-58706&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<AddonTitle>Usage</AddonTitle>
<Sandbox editorHeight={500}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Page = (): React.ReactElement => {
<StoryPageWrapper
componentName="Checkbox"
componentDescription="Checkbox can be used in forms when a user needs to select multiple values from several options."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71951-34708&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox showConsole>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Page = (): React.ReactElement => {
componentName="CheckboxGroup"
componentDescription="CheckboxGroup can be used to group together multiple checkboxes in a forms which provides out of the box state management for the multi-checkboxes and other features."
apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Checkbox/_decisions/decisions.md"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=72092-40150&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox showConsole editorHeight={400}>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Chip/Chip.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Page = (): React.ReactElement => {
</Link>
</Text>
}
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71286-204634&mode=design&t=jyVG8aXFc1Dlw2Se-4"
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Page = (): ReactElement => {
<StoryPageWrapper
componentName="Collapsible"
componentDescription="Collapsible is used to allow users to toggle the visibility of hidden content within a container."
figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73237-255926&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand All @@ -39,7 +39,7 @@ const Page = (): ReactElement => {
alignItems="baseline"
>
<Text>Actual amount</Text>
<Amount value={1000} intent="positive" />
<Amount value={1000} color="positive" />
</Box>
<Box
display="flex"
Expand Down Expand Up @@ -100,7 +100,7 @@ const CollapsibleButtonTemplate: StoryFn<typeof CollapsibleComponent> = ({ ...ar
alignItems="baseline"
>
<Text>Actual amount</Text>
<Amount value={1000} intent="positive" />
<Amount value={1000} color="feedback.text.positive.intense" />
</Box>
<Box
display="flex"
Expand Down Expand Up @@ -141,7 +141,7 @@ const CollapsibleLinkTemplate: StoryFn<typeof CollapsibleComponent> = ({ ...args
alignItems="baseline"
>
<Text>Actual amount</Text>
<Amount value={1000} intent="positive" />
<Amount value={1000} color="feedback.text.positive.intense" />
</Box>
<Box
display="flex"
Expand Down Expand Up @@ -213,7 +213,7 @@ const CollapsibleControlledTemplate: StoryFn<typeof CollapsibleComponent> = ({
alignItems="baseline"
>
<Text>Actual amount</Text>
<Amount value={1000} intent="positive" />
<Amount value={1000} color="feedback.text.positive.intense" />
</Box>
<Box
display="flex"
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Counter/Counter.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Page = (): ReactElement => {
<StoryPageWrapper
componentName="Counter"
componentDescription="Counters are visual indicators that contains numerical values, tallies or counts in regards to some context. It can be used to show non-interactive numerical data."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8222%3A70827"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71114-257323&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
2 changes: 1 addition & 1 deletion packages/blade/src/components/Divider/Divider.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
const Page = (): React.ReactElement => {
return (
<StoryPageWrapper
figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=608-883166&mode=design&t=6uRroMDHC66zlvxT-0"
componentName="Divider"
componentDescription="Divider is a visual element that is used to separate or divide content within a layout"
apiDecisionLink={null}
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71106-265680&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Heading size="large">Usage</Heading>
<Sandbox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const DropdownDocs = (): React.ReactElement => {
componentDescription="Dropdown component to help you create select menu or action menu. To create a menu, you would have to use this component + Trigger (SelectInput, AutoComplete, DropdownButton, DropdownLink) + ActionList"
imports=""
showStorybookControls={false}
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=38643-719971"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=22673-499058&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Box as="section">
<Heading size="xlarge">Playground</Heading>
Expand Down
4 changes: 2 additions & 2 deletions packages/blade/src/components/Indicator/Indicator.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Page = (): ReactElement => {
componentName="Indicator"
componentDescription="Indicators describe the condition of an entity. They can be used to convey semantic meaning,
such as statuses and semantical-categories."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8224%3A1"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71114-258498&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox editorHeight={500}>
Expand Down Expand Up @@ -44,7 +44,7 @@ const meta: Meta<IndicatorProps> = {
args: {
accessibilityLabel: 'Status OK',
children: 'Success',
intent: 'neutral',
color: 'neutral',
size: 'medium',
},
tags: ['autodocs'],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export default {
componentDescription="The AutoComplete component is SelectInput-like component where you can type text and search through the list"
componentName="AutoComplete"
note="AutoComplete is meant to be used only inside the Dropdown component. Things will not work as expected if you are using this without Dropdown"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090'"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=13590-171090&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox showConsole>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export default {
componentName="OTPInput"
apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/OTPInput/_decisions/_decisions.md"
componentDescription="A one-time password (OTP), also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or a transaction. These are a group of inputs and can be either 4 or 6 characters long."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A191059'"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-191059&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox showConsole>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Page = (): ReactElement => {
componentName="PasswordInput"
apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/PasswordInput/_decisions/decisions.md"
componentDescription="PasswordInput is an input field for entering passwords. The input is masked by default. On mobile devices the last typed letter is shown for a brief moment. The masking can be toggled using an optional reveal button."
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A110176"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-180381&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default {
componentDescription="The TextArea component lets you enter long form text which spans over multiple lines."
componentName="TextArea"
apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextArea/_decisions/decisions.md"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11115%3A166804'"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=11115-166804&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export default {
componentDescription="The TextInput component is a component that can be used to input name, email, telephone, url, search or plain text."
componentName="TextInput"
apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextInput/_decisions/_decisions.md"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A210737'"
figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-210737&mode=design&t=jyVG8aXFc1Dlw2Se-4"
>
<Title>Usage</Title>
<Sandbox>
Expand Down
Loading

0 comments on commit 03a37be

Please sign in to comment.