Skip to content

Commit

Permalink
style(epo-react-lib): add new icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexgoff
alexgoff committed Aug 22, 2024
1 parent 690bb86 commit 1b9425e
Show file tree
Hide file tree
Showing 12 changed files with 451 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/epo-react-lib/src/atomic/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { forwardRef, HTMLProps, PropsWithChildren } from "react";
import { IconKey } from "@/svg/icons";
import IconComposer from "@/svg/IconComposer";
import * as Styled from "./styles";
import { IconComposerProps } from "@/svg/IconComposer/IconComposer";
import { IconComposerProps } from "@/svg/IconComposer";

export type ButtonStyleAs = "primary" | "secondary" | "tertiary" | "educator";

Expand Down
2 changes: 1 addition & 1 deletion packages/epo-react-lib/src/layout/SlideoutMenu/SlideoutMenu.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { FunctionComponent, useRef, useState } from "react";

import { SlideoutMenu, MenuGroup, MenuItem, MenuItemRadio } from ".";
import { protoButton } from "@/styles/mixins/appearance";
import IconComposer from "@/svg/IconComposer/IconComposer";
import IconComposer from "@/svg/IconComposer";

const meta: ComponentMeta<typeof SlideoutMenu> = {
component: SlideoutMenu,
Expand Down
2 changes: 1 addition & 1 deletion packages/epo-react-lib/src/layout/SlideoutMenu/SlideoutMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import Slideout from "@/atomic/Slideout";
import { useKeyDownEvent } from "@/hooks/listeners";
import MenuContext from "@/contexts/Menu";
import * as Styled from "./styles";
import IconComposer from "@/svg/IconComposer/IconComposer";
import IconComposer from "@/svg/IconComposer";

interface SlideoutMenuProps {
title: string;
Expand Down
5 changes: 0 additions & 5 deletions packages/epo-react-lib/src/lib/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
* "could this be in lodash?" and if no, it does not belong here.
*/

export const capitalize = (string: string): string => {
if (typeof string !== "string") return "";
return string.charAt(0).toUpperCase() + string.slice(1);
};

export const isAbsoluteUrl = (url: string): boolean =>
/^https?:\/\//i.test(url);

Expand Down
2 changes: 0 additions & 2 deletions packages/epo-react-lib/src/svg/IconComposer/index.ts
View file

This file was deleted.

23 changes: 16 additions & 7 deletions ...lib/src/svg/IconComposer/IconComposer.tsx → ...-react-lib/src/svg/IconComposer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { ComponentType, FunctionComponent } from "react";
import upperFirst from "lodash/upperFirst";
import camelCase from "lodash/camelCase";
import Icons, { IconKey } from "@/svg/icons";
import { capitalize } from "@/lib/utils";

import { SVGProps } from "@/types/svg";

export type { IconKey };

export interface IconComposerProps extends SVGProps {
icon: IconKey | string;
customIcons?: { [key: string]: ComponentType<SVGProps> };
size?: number | string;
customIcons?: Record<string, ComponentType<SVGProps>>;
}

/**
Expand All @@ -21,19 +24,25 @@ export interface IconComposerProps extends SVGProps {
const IconComposer: FunctionComponent<IconComposerProps> = ({
icon,
customIcons = {},
svgProps,
...props
}) => {
const key = capitalize(icon) as IconKey;
const { [key]: IconComponent } = { ...Icons, ...customIcons };
const key = upperFirst(camelCase(icon));
const iconSet: Record<string, ComponentType<SVGProps>> = {
...Icons,
...customIcons,
};

if (!IconComponent) {
if (!Object.hasOwn(iconSet, key)) {
console.error(
`${icon} icon could not be found. Check spelling and any custom icons added.`
);
return null;
}

return <IconComponent {...props} />;
const IconComponent = iconSet[key];

return <IconComponent {...{ ...props, ...svgProps }} />;
};

export default IconComposer;
237 changes: 237 additions & 0 deletions packages/epo-react-lib/src/svg/icons/FocalPlane.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,237 @@
import { FunctionComponent } from "react";
import { SVGProps } from "@/types/svg";
import defaultProps from "./defaultProps";

const FocalPlane: FunctionComponent<SVGProps> = ({
className,
size = 24,
...props
}) => {
const uniqueProps = {
...props,
viewBox: "0 0 610 610",
width: size,
height: size,
fill: "none",
stroke: "#fdda78",
strokeWidth: 1,
className,
};

return (
<svg {...{ ...defaultProps, ...uniqueProps }}>
<g fill="none">
<path d="M565 125V85h-40V45h-40V5H125v40H85v40H45v40H5v360h40v40h40v40h40v40h360v-40h40v-40h40v-40h40V125z" />
<path d="M125 5h40v40h-40z" />
<path d="M125 5h40v40h-40zM165 5h40v40h-40z" />
<path d="M165 5h40v40h-40zM205 5h40v40h-40z" />
<path d="M205 5h40v40h-40zM125 45h40v40h-40z" />
<path d="M125 45h40v40h-40zM165 45h40v40h-40z" />
<path d="M165 45h40v40h-40zM205 45h40v40h-40z" />
<path d="M205 45h40v40h-40zM125 85h40v40h-40z" />
<path d="M125 85h40v40h-40zM165 85h40v40h-40z" />
<path d="M165 85h40v40h-40zM205 85h40v40h-40z" />
<path d="M205 85h40v40h-40zM85 45h40v40H85z" />
<path d="M85 45h40v40H85zM85 85h40v40H85z" />
<path d="M85 85h40v40H85zM45 85h40v40H45z" />
<path d="M45 85h40v40H45zM245 5h40v40h-40z" />
<path d="M245 5h40v40h-40zM285 5h40v40h-40z" />
<path d="M285 5h40v40h-40zM325 5h40v40h-40z" />
<path d="M325 5h40v40h-40zM245 45h40v40h-40z" />
<path d="M245 45h40v40h-40zM285 45h40v40h-40z" />
<path d="M285 45h40v40h-40zM325 45h40v40h-40z" />
<path d="M325 45h40v40h-40zM245 85h40v40h-40z" />
<path d="M245 85h40v40h-40zM285 85h40v40h-40z" />
<path d="M285 85h40v40h-40zM325 85h40v40h-40z" />
<path d="M325 85h40v40h-40zM365 5h40v40h-40z" />
<path d="M365 5h40v40h-40zM405 5h40v40h-40z" />
<path d="M405 5h40v40h-40zM445 5h40v40h-40z" />
<path d="M445 5h40v40h-40zM365 45h40v40h-40z" />
<path d="M365 45h40v40h-40zM405 45h40v40h-40z" />
<path d="M405 45h40v40h-40zM445 45h40v40h-40z" />
<path d="M445 45h40v40h-40zM365 85h40v40h-40z" />
<path d="M365 85h40v40h-40zM405 85h40v40h-40z" />
<path d="M405 85h40v40h-40zM445 85h40v40h-40z" />
<path d="M445 85h40v40h-40zM205 125h40v40h-40z" />
<path d="M205 125h40v40h-40zM205 165h40v40h-40z" />
<path d="M205 165h40v40h-40zM205 205h40v40h-40z" />
<path d="M205 205h40v40h-40zM165 125h40v40h-40z" />
<path d="M165 125h40v40h-40zM165 165h40v40h-40z" />
<path d="M165 165h40v40h-40zM165 205h40v40h-40z" />
<path d="M165 205h40v40h-40zM125 125h40v40h-40z" />
<path d="M125 125h40v40h-40zM125 165h40v40h-40z" />
<path d="M125 165h40v40h-40zM125 205h40v40h-40z" />
<path d="M125 205h40v40h-40zM205 245h40v40h-40z" />
<path d="M205 245h40v40h-40zM205 285h40v40h-40z" />
<path d="M205 285h40v40h-40zM205 325h40v40h-40z" />
<path d="M205 325h40v40h-40zM165 245h40v40h-40z" />
<path d="M165 245h40v40h-40zM165 285h40v40h-40z" />
<path d="M165 285h40v40h-40zM165 325h40v40h-40z" />
<path d="M165 325h40v40h-40zM125 245h40v40h-40z" />
<path d="M125 245h40v40h-40zM125 285h40v40h-40z" />
<path d="M125 285h40v40h-40zM125 325h40v40h-40z" />
<path d="M125 325h40v40h-40zM205 365h40v40h-40z" />
<path d="M205 365h40v40h-40zM205 405h40v40h-40z" />
<path d="M205 405h40v40h-40zM205 445h40v40h-40z" />
<path d="M205 445h40v40h-40zM165 365h40v40h-40z" />
<path d="M165 365h40v40h-40zM165 405h40v40h-40z" />
<path d="M165 405h40v40h-40zM165 445h40v40h-40z" />
<path d="M165 445h40v40h-40zM125 365h40v40h-40z" />
<path d="M125 365h40v40h-40zM125 405h40v40h-40z" />
<path d="M125 405h40v40h-40zM125 445h40v40h-40z" />
<path d="M125 445h40v40h-40zM5 125h40v40H5z" />
<path d="M5 125h40v40H5zM5 165h40v40H5z" />
<path d="M5 165h40v40H5zM5 205h40v40H5z" />
<path d="M5 205h40v40H5zM45 125h40v40H45z" />
<path d="M45 125h40v40H45zM45 165h40v40H45z" />
<path d="M45 165h40v40H45zM45 205h40v40H45z" />
<path d="M45 205h40v40H45zM85 125h40v40H85z" />
<path d="M85 125h40v40H85zM85 165h40v40H85z" />
<path d="M85 165h40v40H85zM85 205h40v40H85z" />
<path d="M85 205h40v40H85zM5 245h40v40H5z" />
<path d="M5 245h40v40H5zM5 285h40v40H5z" />
<path d="M5 285h40v40H5zM5 325h40v40H5z" />
<path d="M5 325h40v40H5zM45 245h40v40H45z" />
<path d="M45 245h40v40H45zM45 285h40v40H45z" />
<path d="M45 285h40v40H45zM45 325h40v40H45z" />
<path d="M45 325h40v40H45zM85 245h40v40H85z" />
<path d="M85 245h40v40H85zM85 285h40v40H85z" />
<path d="M85 285h40v40H85zM85 325h40v40H85z" />
<path d="M85 325h40v40H85zM5 365h40v40H5z" />
<path d="M5 365h40v40H5zM5 405h40v40H5z" />
<path d="M5 405h40v40H5zM5 445h40v40H5z" />
<path d="M5 445h40v40H5zM45 365h40v40H45z" />
<path d="M45 365h40v40H45zM45 405h40v40H45z" />
<path d="M45 405h40v40H45zM45 445h40v40H45z" />
<path d="M45 445h40v40H45zM85 365h40v40H85z" />
<path d="M85 365h40v40H85zM85 405h40v40H85z" />
<path d="M85 405h40v40H85zM85 445h40v40H85z" />
<path d="M85 445h40v40H85zM245 125h40v40h-40z" />
<path d="M245 125h40v40h-40zM245 165h40v40h-40z" />
<path d="M245 165h40v40h-40zM245 205h40v40h-40z" />
<path d="M245 205h40v40h-40zM285 125h40v40h-40z" />
<path d="M285 125h40v40h-40zM285 165h40v40h-40z" />
<path d="M285 165h40v40h-40zM285 205h40v40h-40z" />
<path d="M285 205h40v40h-40zM325 125h40v40h-40z" />
<path d="M325 125h40v40h-40zM325 165h40v40h-40z" />
<path d="M325 165h40v40h-40zM325 205h40v40h-40z" />
<path d="M325 205h40v40h-40zM245 245h40v40h-40z" />
<path d="M245 245h40v40h-40zM245 285h40v40h-40z" />
<path d="M245 285h40v40h-40zM245 325h40v40h-40z" />
<path d="M245 325h40v40h-40zM285 245h40v40h-40z" />
<path d="M285 245h40v40h-40zM285 285h40v40h-40z" />
<path d="M285 285h40v40h-40zM285 325h40v40h-40z" />
<path d="M285 325h40v40h-40zM325 245h40v40h-40z" />
<path d="M325 245h40v40h-40zM325 285h40v40h-40z" />
<path d="M325 285h40v40h-40zM325 325h40v40h-40z" />
<path d="M325 325h40v40h-40zM245 365h40v40h-40z" />
<path d="M245 365h40v40h-40zM245 405h40v40h-40z" />
<path d="M245 405h40v40h-40zM245 445h40v40h-40z" />
<path d="M245 445h40v40h-40zM285 365h40v40h-40z" />
<path d="M285 365h40v40h-40zM285 405h40v40h-40z" />
<path d="M285 405h40v40h-40zM285 445h40v40h-40z" />
<path d="M285 445h40v40h-40zM325 365h40v40h-40z" />
<path d="M325 365h40v40h-40zM325 405h40v40h-40z" />
<path d="M325 405h40v40h-40zM325 445h40v40h-40z" />
<path d="M325 445h40v40h-40zM445 125h40v40h-40z" />
<path d="M445 125h40v40h-40zM445 165h40v40h-40z" />
<path d="M445 165h40v40h-40zM445 205h40v40h-40z" />
<path d="M445 205h40v40h-40zM405 125h40v40h-40z" />
<path d="M405 125h40v40h-40zM405 165h40v40h-40z" />
<path d="M405 165h40v40h-40zM405 205h40v40h-40z" />
<path d="M405 205h40v40h-40zM365 125h40v40h-40z" />
<path d="M365 125h40v40h-40zM365 165h40v40h-40z" />
<path d="M365 165h40v40h-40zM365 205h40v40h-40z" />
<path d="M365 205h40v40h-40zM445 245h40v40h-40z" />
<path d="M445 245h40v40h-40zM445 285h40v40h-40z" />
<path d="M445 285h40v40h-40zM445 325h40v40h-40z" />
<path d="M445 325h40v40h-40zM405 245h40v40h-40z" />
<path d="M405 245h40v40h-40zM405 285h40v40h-40z" />
<path d="M405 285h40v40h-40zM405 325h40v40h-40z" />
<path d="M405 325h40v40h-40zM365 245h40v40h-40z" />
<path d="M365 245h40v40h-40zM365 285h40v40h-40z" />
<path d="M365 285h40v40h-40zM365 325h40v40h-40z" />
<path d="M365 325h40v40h-40zM445 365h40v40h-40z" />
<path d="M445 365h40v40h-40zM445 405h40v40h-40z" />
<path d="M445 405h40v40h-40zM445 445h40v40h-40z" />
<path d="M445 445h40v40h-40zM405 365h40v40h-40z" />
<path d="M405 365h40v40h-40zM405 405h40v40h-40z" />
<path d="M405 405h40v40h-40zM405 445h40v40h-40z" />
<path d="M405 445h40v40h-40zM365 365h40v40h-40z" />
<path d="M365 365h40v40h-40zM365 405h40v40h-40z" />
<path d="M365 405h40v40h-40zM365 445h40v40h-40z" />
<path d="M365 445h40v40h-40zM205 565h40v40h-40z" />
<path d="M205 565h40v40h-40zM205 525h40v40h-40z" />
<path d="M205 525h40v40h-40zM205 485h40v40h-40z" />
<path d="M205 485h40v40h-40zM165 565h40v40h-40z" />
<path d="M165 565h40v40h-40zM165 525h40v40h-40z" />
<path d="M165 525h40v40h-40zM165 485h40v40h-40z" />
<path d="M165 485h40v40h-40zM125 565h40v40h-40z" />
<path d="M125 565h40v40h-40zM125 525h40v40h-40z" />
<path d="M125 525h40v40h-40zM125 485h40v40h-40z" />
<path d="M125 485h40v40h-40zM245 565h40v40h-40z" />
<path d="M245 565h40v40h-40zM245 525h40v40h-40z" />
<path d="M245 525h40v40h-40zM245 485h40v40h-40z" />
<path d="M245 485h40v40h-40zM285 565h40v40h-40z" />
<path d="M285 565h40v40h-40zM285 525h40v40h-40z" />
<path d="M285 525h40v40h-40zM285 485h40v40h-40z" />
<path d="M285 485h40v40h-40zM325 565h40v40h-40z" />
<path d="M325 565h40v40h-40zM325 525h40v40h-40z" />
<path d="M325 525h40v40h-40zM325 485h40v40h-40z" />
<path d="M325 485h40v40h-40zM445 565h40v40h-40z" />
<path d="M445 565h40v40h-40zM445 525h40v40h-40z" />
<path d="M445 525h40v40h-40zM445 485h40v40h-40z" />
<path d="M445 485h40v40h-40zM405 565h40v40h-40z" />
<path d="M405 565h40v40h-40zM405 525h40v40h-40z" />
<path d="M405 525h40v40h-40zM405 485h40v40h-40z" />
<path d="M405 485h40v40h-40zM365 565h40v40h-40z" />
<path d="M365 565h40v40h-40zM365 525h40v40h-40z" />
<path d="M365 525h40v40h-40zM365 485h40v40h-40z" />
<path d="M365 485h40v40h-40zM485 125h40v40h-40z" />
<path d="M485 125h40v40h-40zM485 165h40v40h-40z" />
<path d="M485 165h40v40h-40zM485 205h40v40h-40z" />
<path d="M485 205h40v40h-40zM525 125h40v40h-40z" />
<path d="M525 125h40v40h-40zM525 165h40v40h-40z" />
<path d="M525 165h40v40h-40zM525 205h40v40h-40z" />
<path d="M525 205h40v40h-40zM565 125h40v40h-40z" />
<path d="M565 125h40v40h-40zM565 165h40v40h-40z" />
<path d="M565 165h40v40h-40zM565 205h40v40h-40z" />
<path d="M565 205h40v40h-40zM485 245h40v40h-40z" />
<path d="M485 245h40v40h-40zM485 285h40v40h-40z" />
<path d="M485 285h40v40h-40zM485 325h40v40h-40z" />
<path d="M485 325h40v40h-40zM525 245h40v40h-40z" />
<path d="M525 245h40v40h-40zM525 285h40v40h-40z" />
<path d="M525 285h40v40h-40zM525 325h40v40h-40z" />
<path d="M525 325h40v40h-40zM565 245h40v40h-40z" />
<path d="M565 245h40v40h-40zM565 285h40v40h-40z" />
<path d="M565 285h40v40h-40zM565 325h40v40h-40z" />
<path d="M565 325h40v40h-40zM485 365h40v40h-40z" />
<path d="M485 365h40v40h-40zM485 405h40v40h-40z" />
<path d="M485 405h40v40h-40zM485 445h40v40h-40z" />
<path d="M485 445h40v40h-40zM525 365h40v40h-40z" />
<path d="M525 365h40v40h-40zM525 405h40v40h-40z" />
<path d="M525 405h40v40h-40zM525 445h40v40h-40z" />
<path d="M525 445h40v40h-40zM565 365h40v40h-40z" />
<path d="M565 365h40v40h-40zM565 405h40v40h-40z" />
<path d="M565 405h40v40h-40zM565 445h40v40h-40z" />
<path d="M565 445h40v40h-40zM85 45h40v40H85z" />
<path d="M85 45h40v40H85zM85 85h40v40H85z" />
<path d="M85 85h40v40H85zM45 85h40v40H45z" />
<path d="M45 85h40v40H45zM525 85h40v40h-40z" />
<path d="M525 85h40v40h-40zM485 85h40v40h-40z" />
<path d="M485 85h40v40h-40zM485 45h40v40h-40z" />
<path d="M485 45h40v40h-40zM485 525h40v40h-40z" />
<path d="M485 525h40v40h-40zM485 485h40v40h-40z" />
<path d="M485 485h40v40h-40zM525 485h40v40h-40z" />
<path d="M525 485h40v40h-40zM45 485h40v40H45z" />
<path d="M45 485h40v40H45zM85 485h40v40H85z" />
<path d="M85 485h40v40H85zM85 525h40v40H85z" />
<path d="M85 525h40v40H85z" />
</g>
</svg>
);
};

FocalPlane.displayName = "SVG.FocalPlane";

export default FocalPlane;
45 changes: 45 additions & 0 deletions packages/epo-react-lib/src/svg/icons/Moon/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { FunctionComponent } from "react";
import { SVGProps } from "@/types/svg";
import defaultProps from "../defaultProps";

import phases from "./parts";

const Moon: FunctionComponent<SVGProps> = ({
phase = 0,
className,
size = 46,
fill = "currentColor",
svgProps,
}) => {
const uniqueProps = {
...svgProps,
viewBox: "0 0 46 46",
width: size,
height: size,
fill,
className,
};

const pathProps =
phases[Math.min(Math.floor(phase * phases.length), phases.length - 1)];

return (
<svg {...{ ...defaultProps, ...uniqueProps }}>
<ellipse cx="23" cy="23" rx="23" ry="23" fill="#dce0e3" />
<path
d="M16,36.5a2.486,2.486,0,0,1,.178-.928A3.5,3.5,0,0,1,11.035,33H11a8.962,8.962,0,0,1-5.534-1.9,23.134,23.134,0,0,1-.84-13.452A9.026,9.026,0,0,1,7,15.938a7.949,7.949,0,0,1-1.75-.425A23.066,23.066,0,0,1,14.67,3.581,7.963,7.963,0,0,1,16,8c0,.115,0,.23-.007.344a6,6,0,1,1,3.028,11.569,8.919,8.919,0,0,1,.758,2.093C19.851,22,19.925,22,20,22a4,4,0,1,1-1.894,7.524,9,9,0,0,1-.794.892,3.506,3.506,0,0,1,.26,3.763A2.479,2.479,0,0,1,18.5,34a2.5,2.5,0,1,1,2,1A2.5,2.5,0,1,1,16,36.5ZM11.81,15.036c.1.008.19.018.284.03-.011-.058-.02-.116-.029-.175C11.982,14.942,11.9,14.99,11.81,15.036ZM40,28a3,3,0,1,1,3,3A3,3,0,0,1,40,28Zm-9-3.5a4.545,4.545,0,0,1,.058-.723,5.512,5.512,0,0,1-5.074-1.049A1.5,1.5,0,1,1,24.5,21c.034,0,.068,0,.1,0a5.5,5.5,0,1,1,10.175-.946A4.5,4.5,0,0,1,40,24.5a4.5,4.5,0,1,1-9,0ZM41,20a3,3,0,1,1,3,3A3,3,0,0,1,41,20ZM23,9a1,1,0,1,1,1,1A1,1,0,0,1,23,9ZM38,5.5a1.5,1.5,0,0,1,2.274-1.286l.192.137A1.5,1.5,0,1,1,38,5.5Z"
transform="translate(-4 0)"
fill="#babfbf"
/>
<path
d="M11.088,42.679a6.714,6.714,0,1,1,12.969,3.3Q23.531,46,23,46A22.891,22.891,0,0,1,11.088,42.679Zm23.666-2.514a5.166,5.166,0,0,1,7.514-4.6,23.124,23.124,0,0,1-6.983,6.883A5.144,5.144,0,0,1,34.754,40.164Z"
fill="#e9edf0"
/>
<path fill="#000000" {...pathProps} />
</svg>
);
};

Moon.displayName = "SVG.Moon";

export default Moon;
Loading

0 comments on commit 1b9425e

Please sign in to comment.