Skip to content

Commit 00762be

Browse files
leo95oliveiraleo95oliveira
committed
Input component + Eyebrow Bar
1 parent 2b09cc1 commit 00762be

File tree

13 files changed

+2587
-319
lines changed

13 files changed

+2587
-319
lines changed

‎package-lock.json

Lines changed: 1615 additions & 318 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,9 @@
6060
"ts-node": "^10.9.1",
6161
"tslib": "^2.6.0",
6262
"typescript": "^5.1.6"
63+
},
64+
"dependencies": {
65+
"@storybook/preview-api": "^7.2.0",
66+
"react-select": "^5.7.4"
6367
}
64-
}
68+
}

‎src/components/EyebrowBar/EyebrowBar.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@import "../../styles/variables";
2+
3+
.eyebrowbar {
4+
background: $color__blurple-60;
5+
padding: calc($spacing__s * 1.2) 2rem;
6+
font-size: 1.1rem;
7+
8+
&--content {
9+
max-width: $layout__max-width;
10+
margin: 0 auto;
11+
text-align: center;
12+
color: rgba($color__white, 0.8);
13+
}
14+
15+
&--button {
16+
color: $color__white;
17+
font-weight: bold;
18+
display: inline-block;
19+
padding: $spacing__xs $spacing__s;
20+
margin-left: $spacing__s;
21+
border: 1px solid rgba($color__white, 0.3);
22+
border-radius: $border-radius__m;
23+
white-space: nowrap;
24+
text-decoration: none;
25+
26+
&::after {
27+
content: "→";
28+
padding-left: 0.5rem;
29+
}
30+
31+
&:hover {
32+
background: rgba($color__white, 0.1);
33+
text-decoration: none;
34+
}
35+
}
36+
}

‎src/components/EyebrowBar/EyebrowBar.stories.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import EyebrowBar from "./EyebrowBar";
3+
import { Meta, StoryObj } from "@storybook/react";
4+
5+
const meta: Meta<typeof EyebrowBar> = {
6+
component: EyebrowBar,
7+
title: "Eyebrow Bar",
8+
tags: ["autodocs"],
9+
};
10+
export default meta;
11+
12+
type Story = StoryObj<typeof EyebrowBar>;
13+
14+
export const SampleComponent: Story = (args) => <EyebrowBar {...args} />;
15+
16+
SampleComponent.parameters = {
17+
docs: {
18+
canvas: { sourceState: "shown" },
19+
},
20+
};
21+
SampleComponent.args = {
22+
external: false,
23+
href: "/how-it-works/wardens",
24+
text: "Introducing Code4rena Profiles: a solo auditor's highlight reel.",
25+
};

‎src/components/EyebrowBar/EyebrowBar.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import { EyebrowBarProps } from "./EyebrowBar.types";
3+
import "./EyebrowBar.scss";
4+
5+
/**
6+
*
7+
* @param buttonLabel - Display label for the bar's redirect button.
8+
* @param className - String of custom classes to extend the default styling of the component.
9+
* @param external - Boolean determining whether the redirect button leads to an external (opens in new tab) or internal page (opens on the same page).
10+
* @param href - Absolute URL or relative path for page to be redirected to onClick of the component's button.
11+
* @param id - HTML element identifier.
12+
* @param text - Main text displayed in the component.
13+
*/
14+
const EyebrowBar: React.FC<EyebrowBarProps> = ({
15+
buttonLabel,
16+
className,
17+
external,
18+
href,
19+
id,
20+
text,
21+
}) => {
22+
return (
23+
<div id={id} className={`eyebrowbar ${className ?? ""}`}>
24+
<p className="eyebrowbar--content">
25+
{text}
26+
{href && buttonLabel && (
27+
<a
28+
aria-label={
29+
external ? `${buttonLabel} (opens in new window)` : buttonLabel
30+
}
31+
href={href}
32+
target={external ? "_blank" : undefined}
33+
rel={external ? "noreferrer noopener" : undefined}
34+
className="eyebrowbar--button"
35+
>
36+
{buttonLabel}
37+
</a>
38+
)}
39+
</p>
40+
</div>
41+
);
42+
};
43+
44+
EyebrowBar.defaultProps = {
45+
buttonLabel: "Learn more",
46+
className: undefined,
47+
external: false,
48+
href: undefined,
49+
id: undefined,
50+
};
51+
52+
export default EyebrowBar;

‎src/components/EyebrowBar/EyebrowBar.types.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export interface EyebrowBarProps {
2+
/** Display label for the bar's redirect button. */
3+
buttonLabel?: string;
4+
/** String of custom classes to extend the default styling of the component. */
5+
className?: string;
6+
/** Boolean determining whether the redirect button leads to an external (opens in new tab) or internal page (opens on the same page). */
7+
external?: boolean;
8+
/** Absolute URL or relative path for page to be redirected to onClick of the component's button. */
9+
href?: string;
10+
/** HTML element identifier. */
11+
id?: string;
12+
/** Main text displayed in the component. */
13+
text: string;
14+
}

‎src/components/EyebrowBar/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./EyebrowBar";

‎src/components/Input/Input.scss

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
@import "../../styles/variables";
2+
3+
.c4input {
4+
border: none;
5+
margin: 2rem 0;
6+
7+
p {
8+
margin: 0;
9+
padding-bottom: $spacing__s;
10+
color: $color__text;
11+
font-size: .933rem;
12+
}
13+
14+
&--label {
15+
padding-bottom: $spacing__s;
16+
display: block;
17+
color: $color__white;
18+
font-weight: 600;
19+
cursor: pointer;
20+
}
21+
22+
&--help {
23+
color: $color__n-20;
24+
font-size: $font-size__small;
25+
26+
a {
27+
text-decoration: none;
28+
}
29+
}
30+
31+
&--wrapper {
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
&--control {
37+
display: block;
38+
width: 100%;
39+
padding: $spacing__s;
40+
border: 1px solid $color__n-85;
41+
border-radius: $border-radius__m;
42+
font-size: 1rem;
43+
line-height: 1.5rem;
44+
color: $color__white;
45+
background-color: $color__n-85;
46+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
47+
48+
&--error {
49+
border: 2px solid $color__form-error !important;
50+
}
51+
52+
&:focus {
53+
border-color: $color__button-blurple;
54+
outline: 0;
55+
box-shadow: 0 0 0 0.2rem rgba($color__button-blurple, 0.25);
56+
}
57+
&:disabled {
58+
background-color: $color__n-90;
59+
border-color: $color__n-90;
60+
color: $color__n-30;
61+
cursor: not-allowed;
62+
}
63+
&::placeholder {
64+
color: $color__n-20;
65+
}
66+
67+
&::-webkit-calendar-picker-indicator {
68+
filter: invert(1);
69+
}
70+
71+
&[type="number"] {
72+
&::-webkit-outer-spin-button,&::-webkit-inner-spin-button {
73+
-webkit-appearance: none;
74+
}
75+
}
76+
}
77+
78+
&--error {
79+
margin-top: $spacing__s;
80+
color: $color__form-error !important;
81+
82+
&::before {
83+
content: "⚠ "
84+
}
85+
}
86+
}
87+
88+
.c4input--textarea {
89+
textarea {
90+
min-height: 8.75rem;
91+
resize: vertical;
92+
}
93+
}
94+
95+
.c4input--select {
96+
.c4input--control {
97+
padding: 0;
98+
}
99+
100+
.c4input--reactselect {
101+
&__control {
102+
background-color: $color__n-85 !important;
103+
padding: 0 !important;
104+
color: $color__white !important;
105+
border: transparent !important;
106+
cursor: pointer !important;
107+
108+
&--is-disabled {
109+
background-color: $color__n-90 !important;
110+
111+
.c4input--reactselect__indicator {
112+
color: $color__n-30 !important;
113+
}
114+
}
115+
116+
&--is-focused,&--is-focused:focus-within {
117+
border-color: $color__button-blurple;
118+
outline: 0;
119+
box-shadow: 0 0 0 0.2rem rgba($color__button-blurple, 0.25) !important;
120+
}
121+
}
122+
123+
&__indicator-separator {
124+
background-color: $color__n-50 !important;
125+
}
126+
127+
&__indicator {
128+
color: $color__white !important;
129+
&:focus, &:hover {
130+
color: $color__white !important;
131+
}
132+
}
133+
134+
&__value-container, &__input-container {
135+
font-family: $font__default;
136+
font-size: 1rem;
137+
line-height: 1.5rem;
138+
margin: 0px !important;
139+
padding: 0.25rem 0.5rem !important;
140+
}
141+
142+
&__single-value {
143+
color: $color__white !important;
144+
margin: 0px 0.5rem;
145+
146+
&--is-disabled {
147+
color: $color__n-30 !important;
148+
}
149+
}
150+
151+
&__menu {
152+
background-color: $color__n-80 !important;
153+
color: $color__white !important;
154+
}
155+
156+
&__option--is-focused {
157+
background-color: $color__n-60 !important;
158+
outline: 2px solid $color__n-60 !important;
159+
}
160+
161+
&__placeholder {
162+
$color: $color__white;
163+
opacity: 0.5;
164+
font-size: 0.9em;
165+
}
166+
167+
&__input {
168+
color: $color__white !important;
169+
170+
&:focus {
171+
border-radius: $border-radius__s;
172+
box-shadow: 0 0 0 0.2rem rgba($color__button-blurple, 0.25) !important;
173+
}
174+
}
175+
176+
&__multi-value {
177+
background-color: $color__n-60 !important;
178+
179+
&__label {
180+
color: $color__white !important;
181+
}
182+
183+
&--is-disabled {
184+
color: $color__n-30 !important;
185+
186+
.c4input--reactselect__multi-value__label {
187+
color: $color__n-30 !important;
188+
}
189+
}
190+
}
191+
192+
&__multi-value__remove:hover {
193+
color: $color__red !important;
194+
background-color: rgba(255, 255, 255, 0.1) !important;
195+
}
196+
}
197+
}

0 commit comments

Comments
 (0)