diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/atoms/icons/career.module.scss | 53 | ||||
| -rw-r--r-- | src/components/atoms/icons/career.stories.tsx | 13 | ||||
| -rw-r--r-- | src/components/atoms/icons/career.test.tsx | 9 | ||||
| -rw-r--r-- | src/components/atoms/icons/career.tsx | 64 |
4 files changed, 139 insertions, 0 deletions
diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss new file mode 100644 index 0000000..c5d65eb --- /dev/null +++ b/src/components/atoms/icons/career.module.scss @@ -0,0 +1,53 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.lock { + fill: var(--color-bg); + stroke: var(--color-primary-darker); + stroke-width: 3; +} + +.lines { + fill: var(--color-fg); + stroke-width: 4; +} + +.seal-top { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 2; +} + +.seal-bottom { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 2; +} + +.diploma { + fill: var(--color-bg); + stroke: var(--color-primary-darker); + stroke-width: 4; +} + +.top { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 4; +} + +.handle { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 3; +} + +.bottom { + fill: var(--color-primary); + stroke: var(--color-primary-darker); + stroke-width: 4; +} diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx new file mode 100644 index 0000000..2c1d93a --- /dev/null +++ b/src/components/atoms/icons/career.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import CareerIcon from './career'; + +export default { + title: 'Atoms/Icons', + component: CareerIcon, +} as ComponentMeta<typeof CareerIcon>; + +const Template: ComponentStory<typeof CareerIcon> = (args) => ( + <CareerIcon {...args} /> +); + +export const Career = Template.bind({}); diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx new file mode 100644 index 0000000..62ffc14 --- /dev/null +++ b/src/components/atoms/icons/career.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@test-utils'; +import Career from './career'; + +describe('Career', () => { + it('renders a Career icon', () => { + const { container } = render(<Career />); + expect(container).toBeDefined(); + }); +}); diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx new file mode 100644 index 0000000..aecab1e --- /dev/null +++ b/src/components/atoms/icons/career.tsx @@ -0,0 +1,64 @@ +import { FC } from 'react'; +import styles from './career.module.scss'; + +/** + * Career Component + * + * Render a career svg icon. + */ +const Career: FC = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + className={styles.bottom} + d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z" + /> + <path + className={styles.handle} + d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z" + /> + <path + className={styles.top} + d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z" + /> + <path + className={styles.diploma} + d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z" + /> + <path + className={styles['seal-bottom']} + d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z" + /> + <path + className={styles['seal-top']} + d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z" + /> + <path + className={styles.lines} + d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z" + /> + <path + className={styles.lines} + d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z" + /> + <path + className={styles.lock} + d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z" + /> + </svg> + ); +}; + +export default Career; |
