Skip to content

Commit

Permalink
docs: fix border color and dark theme titles (#1758)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saurabhdaware
saurabhdaware authored Oct 30, 2023
1 parent 8cd0be9 commit 5df7162
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 92 deletions.
6 changes: 6 additions & 0 deletions packages/blade/.storybook/react/manager-head.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
--blade-surface-text-normal: rgba(19, 38, 68, 1);
--blade-brand-gray: rgba(121, 135, 156, 0.18);
--blade-brand-gray-light: rgba(121, 135, 156, 0.08);
--blade-border-color: #EFEFEF;
}

.search-field input {
Expand Down Expand Up @@ -56,4 +57,9 @@
.sto-1va4tas {
box-shadow: none !important;
}

.sto-rmwe9s {
box-shadow: none !important;
border-bottom: 1px solid var(--blade-border-color) !important;
}
</style>
1 change: 1 addition & 0 deletions packages/blade/docs/guides/Intro.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Meta } from '@storybook/addon-docs';

<p style={{ textAlign: 'center' }}>
<img
height="80px"
width="300px"
alt="Blade Design System Logo"
src="https://raw.githubusercontent.com/razorpay/blade/00a200a8f53c1abff99d81a73fbdcbd12a6d0dca/branding/blade-original.min.svg"
Expand Down
191 changes: 99 additions & 92 deletions packages/blade/src/utils/storybook/StoryPageWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { ArgsTable, Primary, PRIMARY_STORY, Stories, Subtitle, Title } from '@storybook/addon-docs';
import { ArgsTable, Primary, PRIMARY_STORY, Stories } from '@storybook/addon-docs';
import styled from 'styled-components';
import useMakeFigmaURL from './useMakeFigmaURL';
import FigmaEmbed from './FigmaEmbed';
Expand All @@ -11,10 +11,15 @@ import { BladeProvider } from '~components/BladeProvider';
import { paymentTheme } from '~tokens/theme';
import { Box } from '~components/Box';
import { Link } from '~components/Link';
import { Title as BladeTitle, Text, Heading } from '~components/Typography';
import type { HeadingProps } from '~components/Typography';
import { Title, Text, Heading } from '~components/Typography';
import { Badge } from '~components/Badge';
import { AnnouncementIcon } from '~components/Icons';

const Subtitle = (props: HeadingProps<{ variant: 'regular' }>): React.ReactElement => {
return <Heading type="subtle" size="large" weight="regular" as="span" {...props} />;
};

type StoryPageWrapperTypes = {
figmaURL?: {
paymentTheme: string;
Expand Down Expand Up @@ -90,98 +95,100 @@ const StoryPageWrapper = (props: StoryPageWrapperTypes): React.ReactElement => {
const { showStorybookControls = true, showArgsTable = true } = props;

return (
<WithGlobalStyles>
<BladeTitle size="xlarge" marginBottom="spacing.3">
{props.componentName}
</BladeTitle>
<Box marginBottom="spacing.4" paddingLeft="spacing.1">
<Heading type="subtle" size="large" weight="regular" as="span">
{props.componentDescription}
</Heading>
</Box>
{componentMetaInfo?.releasedIn ? (
<Box paddingBottom="spacing.6" paddingLeft="spacing.1">
<a
href={`https://github.com/razorpay/blade/releases/tag/%40razorpay%2Fblade%40${componentMetaInfo.releasedIn}`}
target="_blank"
rel="noreferrer"
>
<Badge color="default" fontWeight="bold" size="large" icon={AnnouncementIcon}>
Release: v{componentMetaInfo.releasedIn}
</Badge>
</a>
<BladeProvider themeTokens={paymentTheme}>
<WithGlobalStyles>
<Title size="xlarge" marginBottom="spacing.3">
{props.componentName}
</Title>
<Box marginBottom="spacing.4" paddingLeft="spacing.1">
<Heading type="subtle" size="large" weight="regular" as="span">
{props.componentDescription}
</Heading>
</Box>
) : null}
{props.note ? (
<Alert
description={props.note}
isFullWidth
isDismissible={false}
intent="notice"
marginBottom="spacing.5"
/>
) : null}
{figmaURL !== '#' ? (
<FigmaEmbed src={figmaURL} title={`${props.componentName} Figma Designs`} />
) : null}
<BladeProvider themeTokens={paymentTheme}>{props.children}</BladeProvider>
{props.imports === '' ? null : (
<>
<Title>Imports</Title>
<SandboxHighlighter showLineNumbers={false} showTabs={false}>
{props.imports
? props.imports
: `import { ${props.componentName} } from '@razorpay/blade/components';\nimport type { ${props.componentName}Props } from '@razorpay/blade/components';`}
</SandboxHighlighter>
<br />
<br />
</>
)}
{showStorybookControls ? (
<>
<Title>Example</Title>
<Subtitle>
{`This is the default ${props.componentName}. You can change the properties using the controls below.`}
</Subtitle>
<Primary />
{showArgsTable ? (
<>
<BaseBox id="properties-ref">
<Title>Properties</Title>
{props.apiDecisionLink === '' || props.apiDecisionLink === null ? null : (
<Text marginY="spacing.5">
Check out{' '}
<Link
target="_blank"
href={
props.apiDecisionLink ??
`https://github.com/razorpay/blade/blob/master/packages/blade/src/components/${props.componentName}/_decisions/decisions.md`
}
>
API Decisions for {props.componentName}
</Link>
</Text>
)}
{props.propsDescription ? (
// adding box with surface background so that when theme of storybook is changed, the alert doesn't become invisible
<Box backgroundColor="surface.background.level3.lowContrast">
<Alert
isFullWidth
marginTop="spacing.5"
isDismissible={false}
description={props.propsDescription}
/>
</Box>
) : null}
</BaseBox>
<ArgsTable story={PRIMARY_STORY} />
</>
) : null}
{componentMetaInfo?.releasedIn ? (
<Box paddingBottom="spacing.6" paddingLeft="spacing.1">
<a
href={`https://github.com/razorpay/blade/releases/tag/%40razorpay%2Fblade%40${componentMetaInfo.releasedIn}`}
target="_blank"
rel="noreferrer"
>
<Badge color="default" fontWeight="bold" size="large" icon={AnnouncementIcon}>
Release: v{componentMetaInfo.releasedIn}
</Badge>
</a>
</Box>
) : null}
{props.note ? (
<Alert
description={props.note}
isFullWidth
isDismissible={false}
intent="notice"
marginBottom="spacing.5"
/>
) : null}
{figmaURL !== '#' ? (
<FigmaEmbed src={figmaURL} title={`${props.componentName} Figma Designs`} />
) : null}
{props.children}
{props.imports === '' ? null : (
<>
<Title size="large">Imports</Title>
<SandboxHighlighter showLineNumbers={false} showTabs={false}>
{props.imports
? props.imports
: `import { ${props.componentName} } from '@razorpay/blade/components';\nimport type { ${props.componentName}Props } from '@razorpay/blade/components';`}
</SandboxHighlighter>
<br />
<br />
</>
)}
{showStorybookControls ? (
<>
<Title size="large">Example</Title>
<Subtitle size="medium" marginY="spacing.4">
{`This is the default ${props.componentName}. You can change the properties using the controls below.`}
</Subtitle>
<Primary />
{showArgsTable ? (
<>
<BaseBox id="properties-ref">
<Title size="large">Properties</Title>
{props.apiDecisionLink === '' || props.apiDecisionLink === null ? null : (
<Text marginY="spacing.5">
Check out{' '}
<Link
target="_blank"
href={
props.apiDecisionLink ??
`https://github.com/razorpay/blade/blob/master/packages/blade/src/components/${props.componentName}/_decisions/decisions.md`
}
>
API Decisions for {props.componentName}
</Link>
</Text>
)}
{props.propsDescription ? (
// adding box with surface background so that when theme of storybook is changed, the alert doesn't become invisible
<Box backgroundColor="surface.background.level3.lowContrast">
<Alert
isFullWidth
marginTop="spacing.5"
isDismissible={false}
description={props.propsDescription}
/>
</Box>
) : null}
</BaseBox>
<ArgsTable story={PRIMARY_STORY} />
</>
) : null}

<Stories />
</>
) : null}
</WithGlobalStyles>
<Stories />
</>
) : null}
</WithGlobalStyles>
</BladeProvider>
);
};

Expand Down

0 comments on commit 5df7162

Please sign in to comment.