-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TextLink component #109
TextLink component #109
Conversation
Arashayo
commented
Jul 27, 2023
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Super robota! 😁
Bardzo fajnie to wygląda 😉 Przejrzyj moje uwagi, spróbuj zastosować tu CSS Modules
oraz postaraj się dodać plik storybooka, który opisywałby ten komponent (możesz też podejrzeć jak to wygląda w już istniejących historyjkach) 😉
@@ -0,0 +1,34 @@ | |||
import React from 'react' | |||
import './TextLink.scss' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To jest dobry sposób na import styli do pliku, ale w projekcie korzystamy z koncepcji CSS Modules
(link). Zamiast pliku .scss
tworzymy .module.scss
i importujemy obiekt, który zawiera wszystkie style w nim zdefiniowane. Działanie w praktyce możesz zaobserwować w innych, istniejących już plikach (np. ListItem
lub Button
)
<a | ||
href={url} | ||
target={external ? '_blank' : '_self'} | ||
rel={external ? 'noopener noreferrer' : ''} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow, świetnie użyłeś noopener noreferrer
😀 Fajny use-case
.text-link { | ||
text-decoration: underline; | ||
color: $alternative-a500; | ||
padding: 10px 4px 0px 4px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
convert to rem or add TODO comment to refactor through mixin in the future ;)
&:focus { | ||
outline: none; | ||
background-color: $primary-p100 | ||
; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
code formatting
} | ||
|
||
.external-icon { | ||
top: -0.2em; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why em here? Are u sure about this solution?
@PixelSculptor @marcol13 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Jak @marcol13 da zielone światło, merguj
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Jak dla mnie wygląda spoko! I w storybooku też wszystko śmiga! Approve ✅