Merge pull request #18 from code4rena-dev/develop

Updating Contest Tile to include 2 new variants

Author: leo95oliveira

.github/README.md

@@ -1,7 +1,6 @@
 [![Jest](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml/badge.svg)](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml)
 
 # Code4rena Components Library
----
 
 ## Using Components in your project
 
@@ -36,7 +35,7 @@ import { Alert } from "@code4rena/components-library";
 ### 4. Typescript Support
 All components in this library have TypeScript support. Types for all complex component props are also named exports available through the `/types` subdirectory (see example below):
 ```
-import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/componenets-library/types";
+import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/components-library/types";
 
 <Button
     label="Sample Button"

.storybook/preview.tsx

@@ -9,6 +9,7 @@ const wrapperStyle = {
   justifyContent: "center",
   alignItems: "center",
   padding: "0rem 1rem",
+  marginTop: "2rem",
 };
 
 const preview: Preview = {

README.md

@@ -1,7 +1,6 @@
 [![Jest](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml/badge.svg)](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml)
 
 # Code4rena Components Library
----
 
 ## Using Components in your project
 
@@ -36,7 +35,7 @@ import { Alert } from "@code4rena/components-library";
 ### 4. Typescript Support
 All components in this library have TypeScript support. Types for all complex component props are also named exports available through the `/types` subdirectory (see example below):
 ```
-import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/componenets-library/types";
+import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/components-library/types";
 
 <Button
     label="Sample Button"

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {
@@ -58,7 +58,7 @@
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-transformer-svg": "^2.0.1",
-    "sass": "^1.63.6",
+    "sass": "^1.69.5",
     "storybook": "^7.0.26",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",
@@ -68,6 +68,7 @@
   },
   "dependencies": {
     "clsx": "^1.2.1",
+    "container-query-polyfill": "^1.0.2",
     "date-fns": "^2.30.0",
     "luxon": "^3.3.0",
     "react-avatar": "^5.0.3",

package.json

@@ -7,6 +7,7 @@
     justify-content: center;
     gap: 0.75rem;
     color: $color__white;
+    font-size: $font-size__text;
 
     .statusindicator {
         width: $spacing__s;
@@ -25,4 +26,6 @@
             background: $color__green;
         }
     }
+
+    p { margin: 0; }
 }

src/lib/ContestStatus/ContestStatus.scss

@@ -30,10 +30,10 @@ export const ContestStatus: React.FC<ContestStatusProps> = ({
     status && (
       <div id={id ?? undefined} className={`c4conteststatus ${className}`}>
         <div className={`${styling}`} />
-        {status === Status.UPCOMING && "Soon"}
-        {status === Status.LIVE && "Live"}
-        {status === Status.ENDED && "Ended"}
-        {!status && "-"}
+        {status === Status.UPCOMING && <p>Soon</p>}
+        {status === Status.LIVE && <p>Live</p>}
+        {status === Status.ENDED && <p>Ended</p>}
+        {!status && <p>-</p>}
       </div>
     )
   );