Icon picker component (#404)
* icon picker functionalities and UI implemented * appicon component added for icon picker * PR comments resolved * PR comment on appicon size resolved * icon picker story fixed and enum added for names
This commit is contained in:
devrk96
GitHub
parent
d511b6ecab
commit
4da585a5af
4
app/client/src/assets/icons/ads/bag.svg
Normal file
4
app/client/src/assets/icons/ads/bag.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.6" d="M49.6451 39.5645H32.3753V42.0806H21.6245V39.5645H4.35474V50.4677H49.6451V39.5645Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.2258 8.53226H53V37.2009H32.3754V32.5117H21.6246V37.2009H1V8.53226H17.7742V3.5H36.2258V8.53226ZM21.129 8.53226H32.871V6.25488H21.129V8.53226Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 434 B |
5
app/client/src/assets/icons/ads/book.svg
Normal file
5
app/client/src/assets/icons/ads/book.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0415 4.5H20.7353C23.5968 4.5 25.9165 6.81968 25.9165 9.68116V41.5303H8.0415L8.0415 4.5Z" fill="white"/>
|
||||
<path opacity="0.6" d="M5.06242 15.176V45.3805H48.9374V15.176H52.7291V49.1725H1.27075V15.176H5.06242Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.0833 9.68116C28.0833 6.81969 30.4029 4.5 33.2644 4.5H45.9583V41.5303H28.0833V9.68116Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 532 B |
4
app/client/src/assets/icons/ads/calender.svg
Normal file
4
app/client/src/assets/icons/ads/calender.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 49.6439V14.9216H52V49.6439H2ZM17.9091 23.3181H9.95455V30.1363H17.9091V23.3181ZM23.0227 23.3181H30.9773V30.1363H23.0227V23.3181ZM44.0455 23.3181H36.0909V30.1363H44.0455V23.3181ZM9.95455 34.6817H17.9091V41.4999H9.95455V34.6817ZM30.9773 34.6817H23.0227V41.4999H30.9773V34.6817Z" fill="white"/>
|
||||
<path opacity="0.6" d="M52 12.1439V4.69434H2V12.1439H52Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 519 B |
5
app/client/src/assets/icons/ads/camera.svg
Normal file
5
app/client/src/assets/icons/ads/camera.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 50.9949V13.1768H53V50.9949H1ZM27 43.7727C33.527 43.7727 38.8182 38.4815 38.8182 31.9545C38.8182 25.4275 33.527 20.1364 27 20.1364C20.473 20.1364 15.1818 25.4275 15.1818 31.9545C15.1818 38.4815 20.473 43.7727 27 43.7727Z" fill="white"/>
|
||||
<path opacity="0.6" d="M26.9999 24.2727C28.262 24.2727 29.4828 24.5788 30.5749 25.1539L30.8985 25.3344L29.0972 28.3882C28.4673 28.0166 27.7502 27.8182 26.9999 27.8182C24.7155 27.8182 22.8636 29.6701 22.8636 31.9545C22.8636 32.4635 22.9548 32.9573 23.1301 33.4198L23.2453 33.6934L20.0294 35.1863C19.5631 34.1817 19.3181 33.0837 19.3181 31.9545C19.3181 27.712 22.7574 24.2727 26.9999 24.2727Z" fill="white"/>
|
||||
<path opacity="0.6" d="M17.3779 3H36.613L40 10.0909H14L17.3779 3Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 880 B |
4
app/client/src/assets/icons/ads/chat.svg
Normal file
4
app/client/src/assets/icons/ads/chat.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.8469 6.27637C13.0655 6.27637 2.70408 16.6378 2.70408 29.4192V31.7105V43.6137C2.70408 45.4113 2.33758 47.1901 1.62696 48.8414L0.5 51.46H26.398C38.8751 51.46 48.9898 41.3453 48.9898 28.8682C48.9898 16.3911 38.8751 6.27637 26.398 6.27637H25.8469ZM14.5795 32.6818C16.6129 32.6818 18.2613 31.0334 18.2613 29C18.2613 26.9666 16.6129 25.3182 14.5795 25.3182C12.5461 25.3182 10.8977 26.9666 10.8977 29C10.8977 31.0334 12.5461 32.6818 14.5795 32.6818ZM29.3068 29C29.3068 31.0334 27.6583 32.6818 25.6249 32.6818C23.5915 32.6818 21.9431 31.0334 21.9431 29C21.9431 26.9666 23.5915 25.3182 25.6249 25.3182C27.6583 25.3182 29.3068 26.9666 29.3068 29ZM36.6704 32.6818C38.7038 32.6818 40.3522 31.0334 40.3522 29C40.3522 26.9666 38.7038 25.3182 36.6704 25.3182C34.637 25.3182 32.9886 26.9666 32.9886 29C32.9886 31.0334 34.637 32.6818 36.6704 32.6818Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M21.9128 5.05022C23.9606 4.51378 26.1143 4.24417 28.3333 4.28187C40.6773 4.49157 50.8606 14.3808 51.2037 26.7219C51.2683 29.044 50.9884 31.2923 50.4115 33.4192C52.4164 30.1642 53.5402 26.3121 53.4536 22.1992C53.223 11.2485 44.3619 2.39015 33.4143 2.04154C29.2162 1.90785 25.2619 3.02407 21.9128 5.05022Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
4
app/client/src/assets/icons/ads/file.svg
Normal file
4
app/client/src/assets/icons/ads/file.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 16.9819H53L50.6364 51.2547H3.36364L1 16.9819Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M4.54541 14.6182V2.80005H18.0965L22.3659 7.52732H49.4545V14.6182H4.54541Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 370 B |
4
app/client/src/assets/icons/ads/flight.svg
Normal file
4
app/client/src/assets/icons/ads/flight.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.8053 26.8696C52.8053 40.6046 41.6708 51.7391 27.9357 51.7391C18.2605 51.7391 9.87574 46.2142 5.76424 38.1472L5.98236 38.235C9.60853 38.7286 18.7548 37.5776 24.9492 31.7352L22.9117 32.0707C22.6735 32.1096 22.43 32.1497 22.1818 32.1905L22.1818 32.1905C17.7294 32.9236 11.7435 33.9091 6.84507 32.8072C5.92148 32.5994 3.94021 31.8678 3.28299 30.1681C3.13997 29.0889 3.06616 27.9879 3.06616 26.8696C3.06616 13.1345 14.2006 2 27.9357 2C41.6708 2 52.8053 13.1345 52.8053 26.8696ZM22.739 27.287L27.6282 32.138L34.7587 28.972L37.0957 36.2061L40.3269 34.615V26.8696L48.5044 23.1474C48.9459 22.9465 49.1926 22.4696 49.1018 21.9932C48.9356 21.1223 48.2413 20.4492 47.3658 20.31L44.6154 19.8729C43.2129 19.6501 41.7767 19.9234 40.5542 20.6459L38.8075 21.6781L32.8236 18.9255L31.1775 19.5281L33.389 24.484L36.1251 23.4459L28.1895 28.0664L24.6247 26.5404L22.739 27.287Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1.17292 29.6707C1.60432 31.3712 2.2354 32.5207 3.06617 33.1192C6.53513 35.6183 13.3918 35.4365 22.739 32.6277C19.0892 34.9831 12.0929 36.8837 8.5464 36.8837C4.99993 36.8837 3.52801 36.299 2.29258 35.1799C1.44491 34.4121 0.635993 32.6277 1.17292 29.6707Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
5
app/client/src/assets/icons/ads/frame.svg
Normal file
5
app/client/src/assets/icons/ads/frame.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.2605 3.2605H51.7397V50.6563H2.2605V3.2605ZM48.0938 47.0105V6.90633H5.90633V47.0105H48.0938Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.6668 41.8466H10.3335L20.6274 30.7482L25.9515 35.9326L33.0025 24.875L43.6668 41.8466Z" fill="white"/>
|
||||
<ellipse opacity="0.6" cx="25.0469" cy="18.7075" rx="4.29688" ry="4.24904" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 507 B |
4
app/client/src/assets/icons/ads/globe.svg
Normal file
4
app/client/src/assets/icons/ads/globe.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9999 1.27075C12.7904 1.27075 1.27075 12.7904 1.27075 26.9999C1.27075 41.2095 12.7904 52.7291 26.9999 52.7291C41.2095 52.7291 52.7291 41.2095 52.7291 26.9999C52.7291 12.7904 41.2095 1.27075 26.9999 1.27075ZM43.9511 13.0739C47.0667 16.8619 48.9374 21.7125 48.9374 26.9999C48.9374 39.1154 39.1154 48.9374 26.9999 48.9374C21.5479 48.9374 16.5603 46.9484 12.7232 43.6564C13.2233 43.2163 13.6681 42.7197 13.9999 42.1666C15.2999 39.9999 16.1666 36.7499 13.9999 33.4999C13.5252 32.8217 12.923 32.1223 12.3198 31.4215L12.3198 31.4215C10.9958 29.8836 9.66659 28.3395 9.66659 26.9999C9.66659 25.5708 11.6303 24.6 13.7588 23.5476C15.5029 22.6854 17.3575 21.7684 18.3333 20.4999C20.2833 17.8999 18.1166 13.3499 17.2499 11.8333C16.5437 10.562 15.7454 9.56708 14.855 8.72829C17.7664 6.78924 21.1675 5.52747 24.8333 5.16807C24.8333 5.22226 24.8333 5.27731 24.8333 5.33325C24.8333 6.17359 25.1112 7.26366 25.9191 7.99258C26.3624 8.39254 26.9577 8.71827 27.5513 9.04302C28.3862 9.49983 29.2176 9.95468 29.6172 10.6114C29.9323 11.1293 29.9896 11.8245 30.0494 12.5498C30.1036 13.2073 30.1598 13.8895 30.4119 14.4871C30.9508 15.7643 32.3735 16.1666 33.4999 16.1666C34.4553 16.1666 39.623 14.9871 43.9511 13.0739Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M42.1665 28.95C42.1665 35.6666 33.4998 43.9 29.1665 42.1666C25.2665 40.65 28.0832 37.6166 26.9998 28.95C26.5665 25.4833 30.4665 22.45 34.5832 22.45C38.6998 22.45 42.1665 25.2666 42.1665 28.95Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
4
app/client/src/assets/icons/ads/heart.svg
Normal file
4
app/client/src/assets/icons/ads/heart.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.5678 8.51961C41.2932 3.16013 32.7407 3.16013 27.4661 8.51961C26.8155 9.18068 26.2504 9.89208 25.7619 10.6401C25.2734 9.89208 24.7061 9.1784 24.0577 8.51961C18.7831 3.16013 10.2306 3.16013 4.95598 8.51961C-0.318661 13.8791 -0.318661 22.5691 4.95598 27.9286L25.7597 49.0714L46.5678 27.9286C51.8425 22.5691 51.8425 13.8791 46.5678 8.51961Z" fill="white"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M29.8486 47.8841C29.8486 47.8841 45.3266 32.5337 48.3548 29.0945C51.3829 25.6553 52.2625 20.4604 52.2625 20.4604C52.2625 20.4604 53.2056 27.3862 48.995 31.6177C44.7844 35.8491 31.3858 49.3848 31.3858 49.3848L29.8486 47.8841Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 813 B |
4
app/client/src/assets/icons/ads/product.svg
Normal file
4
app/client/src/assets/icons/ads/product.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0455 31.2726V15.3635H2V49.4544H52V15.3635H34.9545V31.2726L26.8978 27.6791L19.0455 31.2726Z" fill="white"/>
|
||||
<path opacity="0.6" d="M11.6447 4H42.5078L52 12.5227H2L11.6447 4Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 345 B |
4
app/client/src/assets/icons/ads/shopper.svg
Normal file
4
app/client/src/assets/icons/ads/shopper.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4367 17.9866H15.4112H7.85333L3 52.0755H51.5333L46.68 17.9866H39.0967V25.2666H34.85V17.9866H20.8842H19.6833V25.2666H15.4367V17.9866Z" fill="white"/>
|
||||
<path opacity="0.6" d="M27.2668 1.30322C33.6678 1.30322 38.9161 6.44311 39.0922 12.8032L39.0968 13.1332V17.9866H34.8501V13.1332C34.8501 8.96724 31.4327 5.54989 27.2668 5.54989C23.1934 5.54989 19.8357 8.81705 19.6885 12.8566L19.6834 13.1332V17.9866H15.4368V13.1332C15.4368 6.62187 20.7554 1.30322 27.2668 1.30322Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 633 B |
115
app/client/src/components/ads/AppIcon.tsx
Normal file
115
app/client/src/components/ads/AppIcon.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import React from "react";
|
||||
import { ReactComponent as BagIcon } from "assets/icons/ads/bag.svg";
|
||||
import { ReactComponent as ProductIcon } from "assets/icons/ads/product.svg";
|
||||
import { ReactComponent as BookIcon } from "assets/icons/ads/book.svg";
|
||||
import { ReactComponent as CameraIcon } from "assets/icons/ads/camera.svg";
|
||||
import { ReactComponent as FileIcon } from "assets/icons/ads/file.svg";
|
||||
import { ReactComponent as ChatIcon } from "assets/icons/ads/chat.svg";
|
||||
import { ReactComponent as CalenderIcon } from "assets/icons/ads/calender.svg";
|
||||
import { ReactComponent as FrameIcon } from "assets/icons/ads/frame.svg";
|
||||
import { ReactComponent as GlobeIcon } from "assets/icons/ads/globe.svg";
|
||||
import { ReactComponent as ShopperIcon } from "assets/icons/ads/shopper.svg";
|
||||
import { ReactComponent as HeartIcon } from "assets/icons/ads/heart.svg";
|
||||
import { ReactComponent as FlightIcon } from "assets/icons/ads/flight.svg";
|
||||
|
||||
import styled from "styled-components";
|
||||
import { Size } from "./Button";
|
||||
|
||||
export enum AppIconName {
|
||||
BAG = "bag",
|
||||
PRODUCT = "product",
|
||||
BOOK = "book",
|
||||
CAMERA = "camera",
|
||||
FILE = "file",
|
||||
CHAT = "chat",
|
||||
CALENDER = "calender",
|
||||
FLIGHT = "flight",
|
||||
FRAME = "frame",
|
||||
GLOBE = "globe",
|
||||
SHOPPER = "shopper",
|
||||
HEART = "heart",
|
||||
}
|
||||
|
||||
export const sizeHandler = (size: Size) => {
|
||||
let iconSize = 0;
|
||||
switch (size) {
|
||||
case Size.small:
|
||||
iconSize = 20;
|
||||
break;
|
||||
case Size.medium:
|
||||
iconSize = 30;
|
||||
break;
|
||||
case Size.large:
|
||||
iconSize = 54;
|
||||
break;
|
||||
}
|
||||
return iconSize;
|
||||
};
|
||||
|
||||
const IconWrapper = styled.div<AppIconProps>`
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
display: flex;
|
||||
svg {
|
||||
width: ${props => sizeHandler(props.size)}px;
|
||||
height: ${props => sizeHandler(props.size)}px;
|
||||
path {
|
||||
fill: ${props => props.theme.colors.blackShades[9]};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export type AppIconProps = {
|
||||
size: Size;
|
||||
name: AppIconName;
|
||||
};
|
||||
|
||||
const AppIcon = (props: AppIconProps) => {
|
||||
let returnIcon;
|
||||
switch (props.name) {
|
||||
case AppIconName.BAG:
|
||||
returnIcon = <BagIcon />;
|
||||
break;
|
||||
case AppIconName.PRODUCT:
|
||||
returnIcon = <ProductIcon />;
|
||||
break;
|
||||
case AppIconName.BOOK:
|
||||
returnIcon = <BookIcon />;
|
||||
break;
|
||||
case AppIconName.CAMERA:
|
||||
returnIcon = <CameraIcon />;
|
||||
break;
|
||||
case AppIconName.FILE:
|
||||
returnIcon = <FileIcon />;
|
||||
break;
|
||||
case AppIconName.CHAT:
|
||||
returnIcon = <ChatIcon />;
|
||||
break;
|
||||
case AppIconName.CALENDER:
|
||||
returnIcon = <CalenderIcon />;
|
||||
break;
|
||||
case AppIconName.FRAME:
|
||||
returnIcon = <FrameIcon />;
|
||||
break;
|
||||
case AppIconName.GLOBE:
|
||||
returnIcon = <GlobeIcon />;
|
||||
break;
|
||||
case AppIconName.SHOPPER:
|
||||
returnIcon = <ShopperIcon />;
|
||||
break;
|
||||
case AppIconName.HEART:
|
||||
returnIcon = <HeartIcon />;
|
||||
break;
|
||||
case AppIconName.FLIGHT:
|
||||
returnIcon = <FlightIcon />;
|
||||
break;
|
||||
default:
|
||||
returnIcon = null;
|
||||
break;
|
||||
}
|
||||
return returnIcon ? <IconWrapper {...props}>{returnIcon}</IconWrapper> : null;
|
||||
};
|
||||
|
||||
export default AppIcon;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { CommonComponentProps, hexToRgba, ThemeProp } from "./common";
|
||||
import styled from "styled-components";
|
||||
import { IconName, Icon } from "./Icon";
|
||||
import Icon, { IconName } from "./Icon";
|
||||
import Spinner from "./Spinner";
|
||||
import {
|
||||
mediumButton,
|
||||
|
|
@ -233,7 +233,7 @@ const btnFontStyles = (props: ThemeProp & ButtonProps): BtnFontType => {
|
|||
buttonFont = largeButton;
|
||||
padding =
|
||||
!props.text && props.icon
|
||||
? `${props.theme.spaces[5] - 1}px ${props.theme.spaces[5] - 1}px`
|
||||
? `${props.theme.spaces[3]}px`
|
||||
: `${props.theme.spaces[5] - 1}px ${props.theme.spaces[12] - 4}px`;
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { ReactComponent as DeleteIcon } from "assets/icons/ads/delete.svg";
|
|||
import { ReactComponent as UserIcon } from "assets/icons/ads/user.svg";
|
||||
import { ReactComponent as GeneralIcon } from "assets/icons/ads/general.svg";
|
||||
import { ReactComponent as BillingIcon } from "assets/icons/ads/billing.svg";
|
||||
|
||||
import styled from "styled-components";
|
||||
import { Size } from "./Button";
|
||||
import { sizeHandler } from "./Spinner";
|
||||
|
|
@ -48,42 +49,36 @@ export type IconProps = {
|
|||
size?: Size;
|
||||
name?: IconName;
|
||||
invisible?: boolean;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const Icon = (props: IconProps) => {
|
||||
const Icon = (props: IconProps) => {
|
||||
let returnIcon;
|
||||
switch (props.name) {
|
||||
case "delete":
|
||||
returnIcon = (
|
||||
<IconWrapper className="ads-icon" {...props}>
|
||||
<DeleteIcon />
|
||||
</IconWrapper>
|
||||
);
|
||||
returnIcon = <DeleteIcon />;
|
||||
break;
|
||||
case "user":
|
||||
returnIcon = (
|
||||
<IconWrapper className="ads-icon" {...props}>
|
||||
<UserIcon />
|
||||
</IconWrapper>
|
||||
);
|
||||
returnIcon = <UserIcon />;
|
||||
break;
|
||||
case "general":
|
||||
returnIcon = (
|
||||
<IconWrapper className="ads-icon" {...props}>
|
||||
<GeneralIcon />
|
||||
</IconWrapper>
|
||||
);
|
||||
returnIcon = <GeneralIcon />;
|
||||
break;
|
||||
case "billing":
|
||||
returnIcon = (
|
||||
<IconWrapper className="ads-icon" {...props}>
|
||||
<BillingIcon />
|
||||
</IconWrapper>
|
||||
);
|
||||
returnIcon = <BillingIcon />;
|
||||
break;
|
||||
default:
|
||||
returnIcon = null;
|
||||
break;
|
||||
}
|
||||
return returnIcon;
|
||||
return returnIcon ? (
|
||||
<IconWrapper
|
||||
className={props.className ? props.className : "ads-icon"}
|
||||
{...props}
|
||||
>
|
||||
{returnIcon}
|
||||
</IconWrapper>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,95 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import AppIcon, { AppIconName } from "./AppIcon";
|
||||
import { Size } from "./Button";
|
||||
import { CommonComponentProps } from "./common";
|
||||
import { IconName } from "./Icon";
|
||||
|
||||
export const appIconPalette = [
|
||||
AppIconName.BAG,
|
||||
AppIconName.PRODUCT,
|
||||
AppIconName.BOOK,
|
||||
AppIconName.CAMERA,
|
||||
AppIconName.FILE,
|
||||
AppIconName.CHAT,
|
||||
AppIconName.CALENDER,
|
||||
AppIconName.FLIGHT,
|
||||
AppIconName.FRAME,
|
||||
AppIconName.GLOBE,
|
||||
AppIconName.SHOPPER,
|
||||
AppIconName.HEART,
|
||||
];
|
||||
|
||||
type IconSelectorProps = CommonComponentProps & {
|
||||
onSelect: (icon: IconName) => void;
|
||||
onSelect?: (icon: AppIconName) => void;
|
||||
selectedColor: string;
|
||||
selectedIcon?: AppIconName;
|
||||
iconPalette?: AppIconName[];
|
||||
fill?: boolean;
|
||||
};
|
||||
|
||||
export default function IconSelector(props: IconSelectorProps) {
|
||||
return null;
|
||||
}
|
||||
const IconPalette = styled.div<{ fill?: boolean }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: ${props => (props.fill ? "100%" : "234px")};
|
||||
`;
|
||||
|
||||
const IconBox = styled.div<{
|
||||
iconName: AppIconName;
|
||||
selected: AppIconName;
|
||||
bgColor: string;
|
||||
}>`
|
||||
padding: ${props => props.theme.spaces[2]}px
|
||||
${props => props.theme.spaces[2] - 1}px;
|
||||
margin: 0 ${props => props.theme.spaces[2]}px
|
||||
${props => props.theme.spaces[2]}px 0;
|
||||
background-color: ${props =>
|
||||
props.selected === props.iconName
|
||||
? props.bgColor
|
||||
: props.theme.colors.blackShades[2]};
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-right: ${props => props.theme.spaces[0]}px;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconSelector = (props: IconSelectorProps) => {
|
||||
const [selected, setSelected] = useState<AppIconName>(appIconPalette[0]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.selectedIcon) {
|
||||
setSelected(props.selectedIcon);
|
||||
}
|
||||
}, [props.selectedIcon]);
|
||||
|
||||
return (
|
||||
<IconPalette fill={props.fill}>
|
||||
{props.iconPalette &&
|
||||
props.iconPalette.map((iconName: AppIconName, index: number) => {
|
||||
return (
|
||||
<IconBox
|
||||
key={index}
|
||||
selected={selected}
|
||||
iconName={iconName}
|
||||
bgColor={props.selectedColor}
|
||||
onClick={() => {
|
||||
setSelected(iconName);
|
||||
props.onSelect && props.onSelect(iconName);
|
||||
}}
|
||||
>
|
||||
<AppIcon name={iconName} size={Size.small} />
|
||||
</IconBox>
|
||||
);
|
||||
})}
|
||||
</IconPalette>
|
||||
);
|
||||
};
|
||||
|
||||
IconSelector.defaultProps = {
|
||||
fill: false,
|
||||
iconPalette: appIconPalette,
|
||||
};
|
||||
|
||||
export default IconSelector;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import "react-tabs/style/react-tabs.css";
|
||||
import styled from "styled-components";
|
||||
import { Icon, IconName } from "./Icon";
|
||||
import Icon, { IconName } from "./Icon";
|
||||
import { Size } from "./Button";
|
||||
|
||||
const TabsWrapper = styled.div<{ shouldOverflow?: boolean }>`
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from "react";
|
||||
import { Icon } from "../ads/Icon";
|
||||
import Button, { Size, Category, Variant } from "components/ads/Button";
|
||||
import { withKnobs, select, boolean } from "@storybook/addon-knobs";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import Icon from "../ads/Icon";
|
||||
import AppIcon, { AppIconName } from "../ads/AppIcon";
|
||||
|
||||
export default {
|
||||
title: "Icon",
|
||||
|
|
@ -11,29 +12,57 @@ export default {
|
|||
};
|
||||
|
||||
export const ButtonIcon = () => (
|
||||
<Button
|
||||
size={select("size", [Size.small, Size.medium, Size.large], Size.large)}
|
||||
category={select(
|
||||
"category",
|
||||
[Category.primary, Category.secondary, Category.tertiary],
|
||||
Category.primary,
|
||||
)}
|
||||
variant={select(
|
||||
"variant",
|
||||
[Variant.info, Variant.success, Variant.danger, Variant.warning],
|
||||
Variant.info,
|
||||
)}
|
||||
icon={select("iconName", ["delete", "user"], "delete")}
|
||||
isLoading={boolean("Loading", false)}
|
||||
disabled={boolean("Disabled", false)}
|
||||
></Button>
|
||||
<div style={{ padding: "50px", background: "#2B2B2B", height: "500px" }}>
|
||||
<Button
|
||||
size={select("size", [Size.small, Size.medium, Size.large], Size.large)}
|
||||
category={select(
|
||||
"category",
|
||||
[Category.primary, Category.secondary, Category.tertiary],
|
||||
Category.primary,
|
||||
)}
|
||||
variant={select(
|
||||
"variant",
|
||||
[Variant.info, Variant.success, Variant.danger, Variant.warning],
|
||||
Variant.info,
|
||||
)}
|
||||
icon={select("iconName", ["delete", "user"], "delete")}
|
||||
isLoading={boolean("Loading", false)}
|
||||
disabled={boolean("Disabled", false)}
|
||||
></Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const BordelessIcon = () => (
|
||||
<div>
|
||||
<div style={{ padding: "50px", background: "#2B2B2B", height: "500px" }}>
|
||||
<Icon
|
||||
size={select("size", [Size.small, Size.medium, Size.large], Size.large)}
|
||||
name={select("iconName", ["delete", "user"], "delete")}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const BorderlessAppIcon = () => (
|
||||
<div style={{ padding: "50px", background: "#2B2B2B", height: "500px" }}>
|
||||
<AppIcon
|
||||
size={select("size", [Size.small, Size.medium, Size.large], Size.small)}
|
||||
name={select(
|
||||
"select icon",
|
||||
[
|
||||
AppIconName.BAG,
|
||||
AppIconName.PRODUCT,
|
||||
AppIconName.BOOK,
|
||||
AppIconName.CAMERA,
|
||||
AppIconName.FILE,
|
||||
AppIconName.CHAT,
|
||||
AppIconName.CALENDER,
|
||||
AppIconName.FLIGHT,
|
||||
AppIconName.FRAME,
|
||||
AppIconName.GLOBE,
|
||||
AppIconName.SHOPPER,
|
||||
AppIconName.HEART,
|
||||
],
|
||||
AppIconName.BAG,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
54
app/client/src/components/stories/IconSelector.stories.tsx
Normal file
54
app/client/src/components/stories/IconSelector.stories.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import React from "react";
|
||||
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import IconSelector from "../ads/IconSelector";
|
||||
import { action } from "@storybook/addon-actions";
|
||||
import { AppIconName } from "../ads/AppIcon";
|
||||
|
||||
export default {
|
||||
title: "IconSelector",
|
||||
component: IconSelector,
|
||||
decorators: [withKnobs, withDesign],
|
||||
};
|
||||
|
||||
export const IconPicker = () => (
|
||||
<div style={{ padding: "50px", background: "#2B2B2B", height: "500px" }}>
|
||||
<IconSelector
|
||||
onSelect={action("icon-selected")}
|
||||
fill={boolean("fill", false)}
|
||||
selectedIcon={select(
|
||||
"select icon",
|
||||
[
|
||||
AppIconName.BAG,
|
||||
AppIconName.PRODUCT,
|
||||
AppIconName.BOOK,
|
||||
AppIconName.CAMERA,
|
||||
AppIconName.FILE,
|
||||
AppIconName.CHAT,
|
||||
AppIconName.CALENDER,
|
||||
AppIconName.FLIGHT,
|
||||
AppIconName.FRAME,
|
||||
AppIconName.GLOBE,
|
||||
AppIconName.SHOPPER,
|
||||
AppIconName.HEART,
|
||||
],
|
||||
AppIconName.BAG,
|
||||
)}
|
||||
selectedColor={select(
|
||||
"select color",
|
||||
[
|
||||
"#4F70FD",
|
||||
"#54A9FB",
|
||||
"#5ED3DA",
|
||||
"#F56AF4",
|
||||
"#F36380",
|
||||
"#FE9F44",
|
||||
"#E9C951",
|
||||
"#A8D76C",
|
||||
"#6C4CF1",
|
||||
],
|
||||
"#54A9FB",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import Table from "../ads/Table";
|
||||
import Button, { Category, Variant, Size } from "../ads/Button";
|
||||
import { Icon } from "../ads/Icon";
|
||||
import Icon from "../ads/Icon";
|
||||
|
||||
export default {
|
||||
title: "Table",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user