Skip to content

Commit 59664e2

Browse files
dks333dks333
committed
fix stories
1 parent a70e8eb commit 59664e2

File tree

7 files changed

+55
-45
lines changed

7 files changed

+55
-45
lines changed

‎docs/iframe-theme.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,16 @@
5252
if (document.readyState === "loading") {
5353
document.addEventListener("DOMContentLoaded", updateIframesForDarkMode);
5454
} else {
55-
setTimeout(updateIframesForDarkMode, 2000);
55+
setTimeout(updateIframesForDarkMode, 100);
56+
// TODO: add Storybook with Darkmode enabled
57+
let themeChangeCount = 0;
58+
const themeChangeInterval = setInterval(() => {
59+
if (themeChangeCount < 2) {
60+
updateIframesForDarkMode();
61+
themeChangeCount++;
62+
} else {
63+
clearInterval(themeChangeInterval);
64+
}
65+
}, 1000);
5666
}
5767
})();

‎docs/onchainkit/fund/fund-button.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const onrampBuyUrl = getOnrampBuyUrl({
115115
```
116116

117117
<iframe
118-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundbutton--with-funding-url&viewMode=story&dark=true&hero=true"
118+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-button--with-funding-url&viewMode=story&dark=true&hero=true"
119119
width="100%"
120120
height="auto"
121121
/>
@@ -153,7 +153,7 @@ You can choose to have the funding URL open in a popup or a new tab using the `o
153153
```
154154

155155
<iframe
156-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundbutton--open-in-tab&viewMode=story&dark=true&hero=true"
156+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-button--open-in-tab&viewMode=story&dark=true&hero=true"
157157
width="100%"
158158
height="auto"
159159
/>
@@ -186,7 +186,7 @@ You can override the text on the fund button using the `text` prop, and hide the
186186
```
187187

188188
<iframe
189-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundbutton--custom-text-and-hide-icon&viewMode=story&dark=true&hero=true"
189+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-button--custom-text-and-hide-icon&viewMode=story&dark=true&hero=true"
190190
width="100%"
191191
height="auto"
192192
/>
@@ -217,7 +217,7 @@ You can hide the text with the `hideText` prop.
217217
```
218218

219219
<iframe
220-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundbutton--hide-text&viewMode=story&dark=true&hero=true"
220+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-button--hide-text&viewMode=story&dark=true&hero=true"
221221
width="100%"
222222
height="auto"
223223
/>

‎docs/onchainkit/fund/fund-card.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { FundCard } from '@coinbase/onchainkit/fund';
5151
```
5252

5353
<iframe
54-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundcard--default&viewMode=story&dark=true&hero=true"
54+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-card--default&viewMode=story&dark=true&hero=true"
5555
width="100%"
5656
height="370px"
5757
/>
@@ -92,7 +92,7 @@ You can customize the header and button text:
9292
```
9393

9494
<iframe
95-
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fundcard--with-custom-text&viewMode=story&dark=true&hero=true"
95+
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-fund-card--with-custom-text&viewMode=story&dark=true&hero=true"
9696
width="100%"
9797
height="370px"
9898
/>

‎docs/onchainkit/mint/nft-card.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ If you'd like more customization you can follow the steps below to customize whi
106106
<iframe
107107
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-card--card-main&viewMode=story&dark=true&hero=true"
108108
width="100%"
109-
height="auto"
109+
height="670px"
110110
/>
111111
{/* <ViewCardMain /> */}
112112

@@ -142,7 +142,7 @@ import {
142142
<iframe
143143
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-card--card-title-above&viewMode=story&dark=true&hero=true"
144144
width="100%"
145-
height="auto"
145+
height="580px"
146146
/>
147147
{/* <ViewCardTitleAbove /> */}
148148

@@ -170,14 +170,14 @@ import {
170170
<iframe
171171
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-card--card-scaled&viewMode=story&dark=true&hero=true"
172172
width="100%"
173-
height="auto"
173+
height="580px"
174174
/>
175175
</Tab>
176176
<Tab value="Original Aspect Ratio">
177177
<iframe
178178
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-card--card-not-scaled&viewMode=story&dark=true&hero=true"
179179
width="100%"
180-
height="auto"
180+
height="580px"
181181
/>
182182
</Tab>
183183
</Tabs>
@@ -213,7 +213,7 @@ export default function NFTComponent() {
213213
<iframe
214214
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-card--card-override-styles&viewMode=story&dark=true&hero=true"
215215
width="100%"
216-
height="auto"
216+
height="580px"
217217
/>
218218
{/* <ViewCardOverrideStyles /> */}
219219

‎docs/onchainkit/mint/nft-mint-card.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ If you'd like more customization you can follow the steps below to customize whi
107107
<iframe
108108
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-mintcard--card-main&viewMode=story&dark=true&hero=true"
109109
width="100%"
110-
height="auto"
110+
height="760px"
111111
/>
112112
{/* <MintCardMain /> */}
113113
</Step>
@@ -143,7 +143,7 @@ import { NFTCollectionTitle } from '@coinbase/onchainkit/nft/mint';
143143
<iframe
144144
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-mintcard--card-title-above&viewMode=story&dark=true&hero=true"
145145
width="100%"
146-
height="auto"
146+
height="580px"
147147
/>
148148
{/* <MintCardTitleAbove /> */}
149149

@@ -170,14 +170,14 @@ import {
170170
<iframe
171171
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-mintcard--card-scaled&viewMode=story&dark=true&hero=true"
172172
width="100%"
173-
height="auto"
173+
height="580px"
174174
/>
175175
</Tab>
176176
<Tab value="Original Aspect Ratio">
177177
<iframe
178178
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-mintcard--card-not-scaled&viewMode=story&dark=true&hero=true"
179179
width="100%"
180-
height="auto"
180+
height="580px"
181181
/>
182182
</Tab>
183183
</Tabs>
@@ -212,7 +212,7 @@ export default function NFTComponent() {
212212
<iframe
213213
src="https://684b5e62b1ff46bc5bf83966-aijszlfakk.chromatic.com/iframe.html?args=&id=onchainkit-nft-mintcard--card-override-styles&viewMode=story&dark=true&hero=true"
214214
width="100%"
215-
height="auto"
215+
height="580px"
216216
/>
217217
{/* <MintCardOverrideStyles/> */}
218218

‎storybook/stories/NFT/NFTCard.stories.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
1-
import React from 'react';
2-
import type { Meta, StoryObj } from '@storybook/react';
1+
import React from "react";
2+
import type { Meta, StoryObj } from "@storybook/react";
33
import {
44
ViewCardMain,
55
ViewCardTitleAbove,
66
ViewCardScaled,
7-
ViewCardOverrideStyles
8-
} from '../components/NFTComponents';
7+
ViewCardOverrideStyles,
8+
} from "../components/NFTComponents";
99

1010
const meta = {
11-
title: 'OnchainKit/NFT/Card',
11+
title: "OnchainKit/NFT/Card",
1212
component: ViewCardMain,
1313
parameters: {
14-
layout: 'centered',
14+
layout: "centered",
1515
},
16-
tags: ['autodocs'],
16+
tags: ["autodocs"],
1717
} satisfies Meta<typeof ViewCardMain>;
1818

1919
export default meta;
2020

2121
type Story = StoryObj<typeof meta>;
2222

2323
export const CardMain: Story = {
24-
name: 'ViewCardMain',
24+
name: "ViewCardMain",
2525
render: () => <ViewCardMain />,
2626
};
2727

2828
export const CardTitleAbove: Story = {
29-
name: 'ViewCardTitleAbove',
29+
name: "ViewCardTitleAbove",
3030
render: () => <ViewCardTitleAbove />,
3131
};
3232

3333
export const CardOverrideStyles: Story = {
34-
name: 'ViewCardOverrideStyles',
34+
name: "ViewCardOverrideStyles",
3535
render: () => <ViewCardOverrideStyles />,
3636
};
3737

3838
export const CardScaled: Story = {
39-
name: 'ViewCardScaled',
40-
render: () => <ViewCardScaled squared={true} />,
39+
name: "ViewCardScaled",
40+
render: () => <ViewCardScaled square={true} />,
4141
};
4242

4343
export const CardNotScaled: Story = {
44-
name: 'CardNotScaled',
45-
render: () => <ViewCardScaled squared={false} />,
44+
name: "CardNotScaled",
45+
render: () => <ViewCardScaled square={false} />,
4646
};

‎storybook/stories/NFT/NFTMintCard.stories.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
1-
import React from 'react';
2-
import type { Meta, StoryObj } from '@storybook/react';
1+
import React from "react";
2+
import type { Meta, StoryObj } from "@storybook/react";
33
import {
44
MintCardMain,
55
MintCardTitleAbove,
66
MintCardScaled,
7-
MintCardOverrideStyles
8-
} from '../components/NFTComponents';
7+
MintCardOverrideStyles,
8+
} from "../components/NFTComponents";
99

1010
const meta = {
11-
title: 'OnchainKit/NFT/MintCard',
11+
title: "OnchainKit/NFT/MintCard",
1212
component: MintCardMain,
1313
parameters: {
14-
layout: 'centered',
14+
layout: "centered",
1515
},
16-
tags: ['autodocs'],
16+
tags: ["autodocs"],
1717
} satisfies Meta<typeof MintCardMain>;
1818

1919
export default meta;
2020

2121
type Story = StoryObj<typeof meta>;
2222

2323
export const CardMain: Story = {
24-
name: 'MintCardMain',
24+
name: "MintCardMain",
2525
render: () => <MintCardMain />,
2626
};
2727

2828
export const CardTitleAbove: Story = {
29-
name: 'MintCardTitleAbove',
29+
name: "MintCardTitleAbove",
3030
render: () => <MintCardTitleAbove />,
3131
};
3232

3333
export const CardOverrideStyles: Story = {
34-
name: 'MintCardOverrideStyles',
34+
name: "MintCardOverrideStyles",
3535
render: () => <MintCardOverrideStyles />,
3636
};
3737

3838
export const CardScaled: Story = {
39-
name: 'MintCardScaled',
40-
render: () => <MintCardScaled squared={true} />,
39+
name: "MintCardScaled",
40+
render: () => <MintCardScaled square={true} />,
4141
};
4242

4343
export const CardNotScaled: Story = {
44-
name: 'MintCardNotScaled',
45-
render: () => <MintCardScaled squared={false} />,
44+
name: "MintCardNotScaled",
45+
render: () => <MintCardScaled square={false} />,
4646
};

0 commit comments

Comments
 (0)