Skip to content

Commit eee339e

Browse files
elizabetdevelizabetdev
committed
Refactor Icon component stories: add search functionality and responsive layout; update MariaDB logo fill color to use currentColor;
1 parent a8fc8b0 commit eee339e

File tree

3 files changed

+145
-54
lines changed

3 files changed

+145
-54
lines changed

‎src/components/Icon/Icon.stories.tsx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,18 @@ import LogosLight from "../Logos/LogosLight";
22
import { FlagList } from "../icons/Flags";
33
import { PaymentList } from "../icons/Payments";
44
import { Icon } from "./Icon";
5+
import { IconName } from "../types";
56
import { ICONS_MAP } from "./IconCommon";
67
import { IconProps } from "./types";
78
import { Container } from "../Container/Container";
9+
import { styled } from "styled-components";
10+
import { useState } from "react";
11+
import { SearchField } from "../Input/SearchField";
12+
import { Title } from "../Typography/Title/Title";
13+
import { Panel } from "../Panel/Panel";
14+
import { Text } from "../Typography/Text/Text";
15+
import { GridContainer } from "../GridContainer/GridContainer";
16+
import { Spacer } from "../Spacer/Spacer";
817

918
const IconNames = Object.keys(ICONS_MAP);
1019
const FlagNames = Object.keys(FlagList);
@@ -46,3 +55,138 @@ export const Playground = {
4655
height: "",
4756
},
4857
};
58+
59+
type IconGalleryProps = {
60+
name: IconName;
61+
};
62+
63+
const IconGallery = ({ name }: IconGalleryProps) => (
64+
<Container gap="xs">
65+
<Panel
66+
hasBorder
67+
padding="xs"
68+
>
69+
<Icon
70+
name={name}
71+
size="md"
72+
/>
73+
</Panel>
74+
<Text
75+
size="sm"
76+
color="muted"
77+
>
78+
{name}
79+
</Text>
80+
</Container>
81+
);
82+
83+
const ResponsiveGridContainer = styled(GridContainer)`
84+
grid-template-columns: repeat(6, 1fr);
85+
gap: 1em;
86+
87+
@media (max-width: 1400px) {
88+
grid-template-columns: repeat(4, 1fr);
89+
}
90+
@media (max-width: 1100px) {
91+
grid-template-columns: repeat(3, 1fr);
92+
}
93+
@media (max-width: 800px) {
94+
grid-template-columns: repeat(2, 1fr);
95+
}
96+
@media (max-width: 500px) {
97+
grid-template-columns: 1fr;
98+
}
99+
`;
100+
101+
export const Icons = () => {
102+
const [query, setQuery] = useState("");
103+
return (
104+
<Container
105+
orientation="vertical"
106+
gap="sm"
107+
maxWidth="1000px"
108+
style={{ margin: "0 auto" }}
109+
>
110+
<Title type="h2">Glyph</Title>
111+
112+
<Container
113+
orientation="vertical"
114+
gap="md"
115+
>
116+
<SearchField
117+
value={query}
118+
placeholder="Search icons..."
119+
onChange={setQuery}
120+
tabIndex={1}
121+
/>
122+
<ResponsiveGridContainer>
123+
{Object.keys(ICONS_MAP)
124+
.filter(
125+
key => query === "" || key.toLowerCase().includes(query.toLowerCase())
126+
)
127+
.sort()
128+
.map(key => {
129+
return (
130+
<IconGallery
131+
key={key}
132+
name={key as IconName}
133+
/>
134+
);
135+
})}
136+
</ResponsiveGridContainer>
137+
</Container>
138+
139+
<Spacer size="md" />
140+
141+
<Title type="h2">Flags</Title>
142+
143+
<ResponsiveGridContainer>
144+
{Object.keys(FlagList).map(key => (
145+
<IconGallery
146+
key={key}
147+
name={key as IconName}
148+
/>
149+
))}
150+
</ResponsiveGridContainer>
151+
152+
<Spacer size="md" />
153+
154+
<Title type="h2">Payments</Title>
155+
156+
<ResponsiveGridContainer>
157+
{Object.keys(PaymentList).map(key => (
158+
<IconGallery
159+
key={key}
160+
name={key as IconName}
161+
/>
162+
))}
163+
</ResponsiveGridContainer>
164+
165+
<Spacer size="md" />
166+
167+
<Title type="h2">Payments</Title>
168+
169+
<ResponsiveGridContainer>
170+
{Object.keys(PaymentList).map(key => (
171+
<IconGallery
172+
key={key}
173+
name={key as IconName}
174+
/>
175+
))}
176+
</ResponsiveGridContainer>
177+
178+
<Spacer size="md" />
179+
180+
<Title type="h2">Logo</Title>
181+
182+
<ResponsiveGridContainer>
183+
{Object.keys(LogosLight).map(key => (
184+
<IconGallery
185+
key={key}
186+
name={key as IconName}
187+
/>
188+
))}
189+
</ResponsiveGridContainer>
190+
</Container>
191+
);
192+
};

‎src/components/Logos/MariaDB.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const MariaDB = (props: SVGAttributes<SVGElement>) => (
1010
{...props}
1111
>
1212
<path
13-
fill="#003343"
13+
fill="currentColor"
1414
d="M61.76 12.4c-1.81.77-2.13.82-4.48 1-1.73.11-2 .14-3.2.53-2.03.67-3.73 2.02-5.41 4.24a57.3 57.3 0 0 0-3.34 5.25c0 .15-1.73 2.64-2.42 3.5a14.12 14.12 0 0 1-5.71 4.23c-2.05.93-3.28 1.38-10.93 3.9a71.8 71.8 0 0 0-6.32 2.27c-2.33 1.24-4.34 3-5.87 5.14-2.67 3.5-2.61 3.5-8.13 2.51-.6-.07-1.2-.13-1.79-.15-1.73-.14-2.72.1-3.55.87l-.61.58.48.21a16 16 0 0 1 1.5 1.06c.6.5 1.25.95 1.94 1.33a6 6 0 0 1-.61.93c-1.15 1.53-1.58 2.3-1.52 2.75.05.45.08.45 1.14.45 1.39 0 2.19-.13 3.36-.53a51.34 51.34 0 0 0 7.42-3.7c2.08-1.33 4.58-2.66 5.22-2.79 2.8-.55 5.67-.6 8.48-.16.27.03.99.13 1.6.16a7.6 7.6 0 0 1 1.23.21c.05.03 1.25.1 2.67.16 2.48.05 2.93 0 3.46-.53a9.9 9.9 0 0 0 1.34-2.6c.53-1.69 1.06-2.43.96-1.3a16.6 16.6 0 0 1-1.92 6.4 19.55 19.55 0 0 1-2.48 3.7c-.86.9-.83.95.24.82a13.81 13.81 0 0 0 5.6-2.17 18.2 18.2 0 0 0 5.81-8.03c.3-.71.59-.58.5.22l-.15 1.32-.08.87.93-.53c2.21-1.27 3.79-3.33 5.68-7.65.61-1.35 2.35-7.73 2.85-10.51.19-.93.43-1.86.72-2.76a4.5 4.5 0 0 1 1.28-2.28c.51-.53 1.68-1.48 2.62-2.12 1.92-1.35 2.53-2 3.17-3.2.53-1.11.75-3 .35-3.6-.35-.53-.75-.53-2.03 0Z"
1515
/>
1616
</svg>

‎src/components/icons/Icons.mdx

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)