From ed4531d0bf24513ee7201b8759454d2cdb71418c Mon Sep 17 00:00:00 2001 From: Khumoyun Inoyatov Date: Mon, 26 Feb 2024 15:19:27 +0500 Subject: [PATCH] add: color and hover --- .eslintrc | 1 + package.json | 1 + src/app.component.tsx | 41 +++++++----- src/assets/wavy_line.svg | 3 + src/components/text/text.scss | 114 ++++++++++++++++++++++++++++++++++ src/components/text/text.tsx | 54 +++++++++++----- yarn.lock | 71 +++++++++++++++++++-- 7 files changed, 247 insertions(+), 38 deletions(-) create mode 100644 src/assets/wavy_line.svg diff --git a/.eslintrc b/.eslintrc index 0608158..c690ad0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -199,6 +199,7 @@ "no-void": "off", "no-continue": "off", "no-unused-vars": "off", + "no-case-declarations": "off", "no-restricted-imports": [ "error", { diff --git a/package.json b/package.json index 5567848..6da4f9d 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "husky": "^9.0.11", "lint-staged": "^15.2.2", "prettier": "^3.2.5", + "sass": "^1.71.1", "typescript": "^5.3.3", "vite": "^5.1.1" } diff --git a/src/app.component.tsx b/src/app.component.tsx index 2e87a14..20b0199 100644 --- a/src/app.component.tsx +++ b/src/app.component.tsx @@ -1,24 +1,33 @@ -import { useState } from "react"; +import { Text } from "./components/text/text.tsx"; import "./app.styles.css"; export const App = () => { - const [count, setCount] = useState(0); - - const handleClick = () => { - setCount(previous => previous + 1); - }; - return ( <> -

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
+ Default + + Link + + + What is e-waste? + + + Heading level 2 + + + Heading level 3 + + + Heading level 4 + + + Paragraph text. Lorem ipsum dolor sit amet. Conserteum lorem ipsum dolor + sit amet + + + Paragraph text. Lorem ipsum dolor sit amet. Conserteum lorem ipsum dolor + sit amet + ); }; diff --git a/src/assets/wavy_line.svg b/src/assets/wavy_line.svg new file mode 100644 index 0000000..777162e --- /dev/null +++ b/src/assets/wavy_line.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/text/text.scss b/src/components/text/text.scss index ea8dccf..ff5cef6 100644 --- a/src/components/text/text.scss +++ b/src/components/text/text.scss @@ -5,4 +5,118 @@ line-height: 24px; letter-spacing: 0; text-align: left; +} + +.white { + color: #ffffff; +} + +.black { + color: #002F3F; +} + +.primary { + color: #0E7C73; +} + +.secondary { + color: #97CAEF; +} + +.tertiary { + color: #973CEF; +} + +.link { + font-family: Lato, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 24px; + letter-spacing: 0; + text-align: left; +} + +.title { + font-family: Lato, sans-serif; + font-weight: 500; + &:hover { + span { + &:before { + width: 100%; + transition: all ease-out 0.3s; + } + } + } + span { + display: inline; + position: relative; + &:before { + content: ""; + position: absolute; + left: 0; + bottom: -2px; + height: 2px; + width: 33%; + background-color: #0E7C73; + } + } + + &.h1 { + font-size: 40px; + line-height: 48px; + letter-spacing: 0; + text-align: left; + } + + &.h2 { + font-size: 32px; + line-height: 48px; + letter-spacing: 0; + text-align: left; + } + + &.h3 { + font-size: 24px; + line-height: 36px; + letter-spacing: 0; + text-align: left; + } + + &.h4 { + font-size: 20px; + line-height: 30px; + letter-spacing: 0; + text-align: left; + span { + &:before { + display: none; + } + } + } +} + +.paragraph { + font-family: Open Sans, sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0; + text-align: left; +} + +.small { + font-family: Open Sans, sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0; +} + +.default { + font-family: Lato, sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 24px; + letter-spacing: 0; + text-align: left; } \ No newline at end of file diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index b67fd66..74d5a04 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -1,15 +1,22 @@ import { ReactNode } from "react"; import cc from "classcat"; -import { Link } from "react-router-dom"; import "./text.scss"; -export type TextVariant = "link" | "name" | "title" | "text" | "default"; +export type TextVariant = "link" | "title" | "paragraph" | "small" | "default"; +export type TextColor = + | "primary" + | "secondary" + | "tertiary" + | "black" + | "white"; export interface IProps { - variant: TextVariant; - className: string; + variant?: TextVariant; + className?: string; children: string | ReactNode; - link: string; + link?: string; + headingLevel?: keyof JSX.IntrinsicElements; + color?: TextColor; } export const Text = ({ @@ -17,25 +24,38 @@ export const Text = ({ className, children, link, + headingLevel = "h2", + color = "black", }: IProps) => { + const commonProps = { + className: cc(["text", variant, headingLevel, className, color]), + children, + }; + switch (variant) { case "link": - return ( - - {children} - + return link ? ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ) : ( + ); - case "name": + case "title": + const HeadingComponent: React.ElementType = headingLevel; return ( - {children} + + {children} + ); - case "title": - return

{children}

; - case "text": - return

{children}

; + case "paragraph": + return

; + case "small": + return

; case "default": - return

{children}
; + return
; default: - return
{children}
; + return
; } }; diff --git a/yarn.lock b/yarn.lock index 0b3325b..37468c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -758,6 +758,14 @@ ansi-styles@^6.0.0, ansi-styles@^6.2.1: resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz" integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug== +anymatch@~3.1.2: + version "3.1.3" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" + integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + argparse@^2.0.1: version "2.0.1" resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz" @@ -894,6 +902,11 @@ balanced-match@^1.0.0: resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +binary-extensions@^2.0.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" + integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz" @@ -909,7 +922,7 @@ brace-expansion@^2.0.1: dependencies: balanced-match "^1.0.0" -braces@^3.0.2: +braces@^3.0.2, braces@~3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== @@ -967,6 +980,21 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +"chokidar@>=3.0.0 <4.0.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" + integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + classcat@^5.0.4: version "5.0.4" resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.4.tgz#e12d1dfe6df6427f260f03b80dc63571a5107ba6" @@ -1665,7 +1693,7 @@ get-tsconfig@^4.5.0: dependencies: resolve-pkg-maps "^1.0.0" -glob-parent@^5.1.2: +glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -1800,6 +1828,11 @@ ignore@^5.2.0, ignore@^5.2.4: resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz" integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg== +immutable@^4.0.0: + version "4.3.5" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0" + integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw== + import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz" @@ -1858,6 +1891,13 @@ is-bigint@^1.0.1: dependencies: has-bigints "^1.0.1" +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-boolean-object@^1.1.0: version "1.1.2" resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz" @@ -1916,7 +1956,7 @@ is-generator-function@^1.0.10: dependencies: has-tostringtag "^1.0.0" -is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: version "4.0.3" resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -2262,6 +2302,11 @@ node-releases@^2.0.14: resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz" integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + npm-run-path@^5.1.0: version "5.2.0" resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz" @@ -2429,7 +2474,7 @@ picocolors@^1.0.0: resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -2524,6 +2569,13 @@ react@^18.2.0: dependencies: loose-envify "^1.1.0" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + reflect.getprototypeof@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz" @@ -2651,6 +2703,15 @@ safe-regex-test@^1.0.0: get-intrinsic "^1.2.2" is-regex "^1.1.4" +sass@^1.71.1: + version "1.71.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.71.1.tgz#dfb09c63ce63f89353777bbd4a88c0a38386ee54" + integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.23.0: version "0.23.0" resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz" @@ -2742,7 +2803,7 @@ slice-ansi@^7.0.0: ansi-styles "^6.2.1" is-fullwidth-code-point "^5.0.0" -source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==