Skip to content

Commit ccd9853

Browse files
SamusEldergSamusElderg
committed
contest tile and other updates
- fixed any `@ts-ignore` instances to do with CSS props (using react's `CSSProperties` type) - extended contest tile storybook examples to include 'upcoming' && 'current' && 'ended' states - fixed the `ts-ignore`s in contest tile too (to do with variant enums - added an option `hideDropdown` prop to the contest tile to allow frontend to override and hide the dropdown options - add audit's title to `aria-label` of the `view audit` button in contest tiles solves part of #32
1 parent 2e813a8 commit ccd9853

File tree

7 files changed

+104
-42
lines changed

7 files changed

+104
-42
lines changed

‎.storybook/preview.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from "react";
1+
import React, { CSSProperties } from "react";
22
import type { Preview } from "@storybook/react";
33
import "../src/styles/base/typography.scss";
44

5-
const wrapperStyle = {
5+
const wrapperStyle: CSSProperties = {
66
display: "flex",
77
gap: "10px",
88
flexWrap: "wrap",
@@ -15,7 +15,6 @@ const wrapperStyle = {
1515
const preview: Preview = {
1616
decorators: [
1717
(Story) => (
18-
/* @ts-ignore */
1918
<div style={wrapperStyle}>
2019
<Story />
2120
</div>

‎src/lib/Button/Button.stories.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from "react";
1+
import React, { CSSProperties } from "react";
22
import { Button } from "./Button";
33
import { Meta, StoryObj } from "@storybook/react";
44
import { ButtonSize, ButtonType, ButtonVariant } from "./Button.types";
55

6-
const wrapperStyle = {
6+
const wrapperStyle: CSSProperties = {
77
display: "flex",
88
gap: "10px",
99
flexWrap: "wrap",
@@ -69,7 +69,6 @@ export const Links: Story = {
6969
render: (args) => (
7070
<>
7171
{/* Primary */}
72-
{/* @ts-ignore */}
7372
<div style={wrapperStyle}>
7473
<Button
7574
variant={ButtonVariant.PRIMARY}
@@ -91,7 +90,6 @@ export const Links: Story = {
9190
/>
9291
</div>
9392
{/* Secondary */}
94-
{/* @ts-ignore */}
9593
<div style={wrapperStyle}>
9694
<Button
9795
variant={ButtonVariant.SECONDARY}
@@ -134,7 +132,6 @@ export const Buttons: Story = {
134132
render: (args) => (
135133
<>
136134
{/* Primary */}
137-
{/* @ts-ignore */}
138135
<div style={wrapperStyle}>
139136
<Button
140137
variant={ButtonVariant.PRIMARY}
@@ -150,7 +147,6 @@ export const Buttons: Story = {
150147
/>
151148
</div>
152149
{/* Secondary */}
153-
{/* @ts-ignore */}
154150
<div style={wrapperStyle}>
155151
<Button
156152
variant={ButtonVariant.SECONDARY}

‎src/lib/ContestTile/ContestTile.stories.tsx

Lines changed: 89 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const meta: Meta<typeof ContestTile> = {
2323
export default meta;
2424

2525
type Story = StoryObj<typeof ContestTile>;
26+
2627
const parameters = {
2728
layout: "fullscreen",
2829
docs: {
@@ -31,8 +32,66 @@ const parameters = {
3132
},
3233
};
3334

35+
const defaultArgs = {
36+
htmlId: "",
37+
contestData: {
38+
codeAccess: "public",
39+
contestType: "Open Audit",
40+
isUserCertified: false,
41+
contestId: 321,
42+
contestUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
43+
contestRepo: "https://github.com/code-423n4/2023-07-axelar",
44+
findingsRepo: "https://github.com/code-423n4/2023-07-axelar",
45+
amount: "$80,000 USDC",
46+
startDate: "2030-07-12T18:00:00Z",
47+
endDate: "2030-07-21T18:00:00.000Z",
48+
},
49+
variant: ContestTileVariant.DARK,
50+
sponsorImage: "/logos/apple-touch-icon.png",
51+
sponsorUrl: "https://twitter.com/axelarcore",
52+
title: "Axelar Network",
53+
description: "Decentralized interoperability network.",
54+
};
55+
56+
export const ContestTileUpcoming: Story = (args) => {
57+
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
58+
59+
return <Fragment>
60+
<ContestTile
61+
{...args}
62+
variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
63+
startDate={new Date(args.contestData.startDate).toISOString()}
64+
endDate={new Date(args.contestData.endDate).toISOString()}
65+
/>
66+
<ContestTile
67+
{...args}
68+
variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
69+
startDate={new Date(args.contestData.startDate).toISOString()}
70+
endDate={new Date(args.contestData.endDate).toISOString()}
71+
/>
72+
</Fragment>
73+
};
74+
75+
export const ContestTileLive: Story = (args) => {
76+
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
77+
78+
return <Fragment>
79+
<ContestTile
80+
{...args}
81+
variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
82+
startDate={new Date(args.contestData.startDate).toISOString()}
83+
endDate={new Date(args.contestData.endDate).toISOString()}
84+
/>
85+
<ContestTile
86+
{...args}
87+
variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
88+
startDate={new Date(args.contestData.startDate).toISOString()}
89+
endDate={new Date(args.contestData.endDate).toISOString()}
90+
/>
91+
</Fragment>
92+
};
3493

35-
export const ContestTileComponent: Story = (args) => {
94+
export const ContestTileEnded: Story = (args) => {
3695
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
3796

3897
return <Fragment>
@@ -51,7 +110,7 @@ export const ContestTileComponent: Story = (args) => {
51110
</Fragment>
52111
};
53112

54-
export const BountyTileComponent: Story = (args) => {
113+
export const BountyTile: Story = (args) => {
55114
const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
56115

57116
return <Fragment>
@@ -64,42 +123,47 @@ export const BountyTileComponent: Story = (args) => {
64123
</Fragment>
65124
}
66125

67-
ContestTileComponent.parameters = parameters;
68-
BountyTileComponent.parameters = parameters;
126+
ContestTileUpcoming.parameters = parameters;
127+
ContestTileLive.parameters = parameters;
128+
ContestTileEnded.parameters = parameters;
129+
BountyTile.parameters = parameters;
69130

131+
ContestTileUpcoming.args = {
132+
...defaultArgs,
133+
contestData: {
134+
...defaultArgs.contestData,
135+
startDate: "2030-07-12T18:00:00Z",
136+
endDate: "2030-07-21T18:00:00.000Z"
137+
}
138+
};
70139

71-
ContestTileComponent.args = {
72-
htmlId: "",
140+
ContestTileLive.args = {
141+
...defaultArgs,
73142
contestData: {
74-
codeAccess: "public",
75-
contestType: "Open Audit",
76-
isUserCertified: false,
77-
contestId: 321,
78-
contestUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
79-
contestRepo: "https://github.com/code-423n4/2023-07-axelar",
80-
findingsRepo: "https://github.com/code-423n4/2023-07-axelar",
81-
amount: "$80,000 USDC",
143+
...defaultArgs.contestData,
82144
startDate: "2023-07-12T18:00:00Z",
83-
endDate: "2023-07-21T18:00:00Z",
84-
},
85-
/** @ts-ignore */
86-
variant: "DARK",
87-
sponsorImage: "/logos/apple-touch-icon.png",
88-
sponsorUrl: "https://twitter.com/axelarcore",
89-
title: "Axelar Network",
90-
description: "Decentralized interoperability network.",
145+
endDate: "2030-07-21T18:00:00.000Z"
146+
}
147+
};
148+
149+
ContestTileEnded.args = {
150+
...defaultArgs,
151+
contestData: {
152+
...defaultArgs.contestData,
153+
startDate: "2023-07-12T18:00:00Z",
154+
endDate: "2023-07-21T18:00:00Z"
155+
}
91156
};
92157

93-
BountyTileComponent.args = {
158+
BountyTile.args = {
94159
htmlId: "",
95160
bountyData: {
96161
amount: "$80,000 USDC",
97162
startDate: "2023-07-12T18:00:00Z",
98163
repoUrl: "https://github.com/code-423n4/2023-07-axelar",
99164
bountyUrl: "https://code4rena.com/audits/2023-07-axelar-network#top",
100165
},
101-
/** @ts-ignore */
102-
variant: "LIGHT",
166+
variant: ContestTileVariant.LIGHT,
103167
sponsorImage: "/logos/apple-touch-icon.png",
104168
sponsorUrl: "https://twitter.com/axelarcore",
105169
title: "Axelar Network",

‎src/lib/ContestTile/ContestTile.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export const ContestTile: React.FC<ContestTileProps> = ({
152152
sponsorUrl = undefined,
153153
title,
154154
description,
155+
hideDropdown = false,
155156
}) => {
156157
const isDefault =
157158
variant === ContestTileVariant.DARK || variant === ContestTileVariant.LIGHT;
@@ -180,6 +181,7 @@ export const ContestTile: React.FC<ContestTileProps> = ({
180181
sponsorUrl={sponsorUrl}
181182
contestData={contestData}
182183
bountyData={bountyData}
184+
hideDropdown={hideDropdown}
183185
/>
184186
) : (
185187
<CompactTemplate

‎src/lib/ContestTile/ContestTile.types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export interface ContestTileProps {
2525
title: string;
2626
/** Description for the current event. */
2727
description: string;
28+
/** Whether to hide the dropdown links. */
29+
hideDropdown?: boolean;
2830
}
2931

3032
export interface BountyTileData {

‎src/lib/ContestTile/DefaultTemplate.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export default function DefaultTemplate({
1919
sponsorImage,
2020
sponsorUrl,
2121
contestData,
22-
bountyData
22+
bountyData,
23+
hideDropdown,
2324
}: ContestTileProps) {
2425
const variantClasses = clsx({
2526
"tile--light": variant === ContestTileVariant.LIGHT,
@@ -84,7 +85,7 @@ export default function DefaultTemplate({
8485
const links: DropdownLink[] = [];
8586

8687
if (contestData && contestTimelineObject) {
87-
if (contestTimelineObject.contestStatus !== Status.LIVE) {
88+
if (hideDropdown || contestTimelineObject.contestStatus !== Status.LIVE) {
8889
setDropdownLinks(links);
8990
return;
9091
}
@@ -130,6 +131,7 @@ export default function DefaultTemplate({
130131
hasBotRace,
131132
contestTimelineObject,
132133
canViewContest,
134+
hideDropdown,
133135
]);
134136

135137
return (
@@ -340,7 +342,7 @@ function IsContest({
340342
<div className="options">
341343
<a
342344
className="contest-redirect"
343-
aria-label="View audit"
345+
aria-label={"View " + title + " audit"}
344346
href={contestUrl}
345347
onClick={(e) => e.stopPropagation()}
346348
>

‎src/lib/Input/Input.stories.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useState } from "react";
1+
import React, { CSSProperties, useState } from "react";
22
import { Input } from "./Input";
33
import { Meta, StoryObj } from "@storybook/react";
44
import { useArgs } from "@storybook/preview-api";
55
import { InputVariant } from "./Input.types";
66

7-
const wrapperStyle = {
7+
const wrapperStyle: CSSProperties = {
88
display: "flex",
99
gap: "10px",
1010
flexWrap: "wrap",
@@ -114,7 +114,6 @@ SampleComponent.args = {
114114
*/
115115
export const InputField: Story = (storyArgs) => (
116116
<>
117-
{/* @ts-ignore */}
118117
<div style={wrapperStyle}>
119118
{/* No value input */}
120119
<Input
@@ -169,7 +168,6 @@ InputField.parameters = {
169168
*/
170169
export const TextArea: Story = (storyArgs) => (
171170
<>
172-
{/* @ts-ignore */}
173171
<div style={wrapperStyle}>
174172
{/* No value input */}
175173
<Input
@@ -225,7 +223,6 @@ TextArea.parameters = {
225223
*/
226224
export const Select: Story = (storyArgs) => (
227225
<>
228-
{/* @ts-ignore */}
229226
<div style={wrapperStyle}>
230227
{/* No value select */}
231228
<Input

0 commit comments

Comments
 (0)