diff options
4 files changed, 133 insertions, 0 deletions
diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss new file mode 100644 index 0000000..6c8f701 --- /dev/null +++ b/src/components/atoms/icons/computer-screen.module.scss @@ -0,0 +1,39 @@ +@use "@styles/abstracts/functions" as fun; + +.icon { + display: block; + width: var(--icon-size, #{fun.convert-px(40)}); +} + +.root, +.separator, +.cursor, +.line, +.text { + fill: var(--color-fg); +} + +.stand { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-dark); + + &--top { + stroke-width: 3; + } + + &--bottom { + stroke-width: 2; + } +} + +.screen { + fill: var(--color-bg); + stroke: var(--color-primary-dark); + stroke-width: 3; +} + +.contour { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-dark); + stroke-width: 3; +} diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx new file mode 100644 index 0000000..317b4b6 --- /dev/null +++ b/src/components/atoms/icons/computer-screen.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import ComputerScreenIcon from './computer-screen'; + +export default { + title: 'Atoms/Icons', + component: ComputerScreenIcon, +} as ComponentMeta<typeof ComputerScreenIcon>; + +const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => ( + <ComputerScreenIcon {...args} /> +); + +export const ComputerScreen = Template.bind({}); diff --git a/src/components/atoms/icons/computer-screen.test.tsx b/src/components/atoms/icons/computer-screen.test.tsx new file mode 100644 index 0000000..c0e53e0 --- /dev/null +++ b/src/components/atoms/icons/computer-screen.test.tsx @@ -0,0 +1,9 @@ +import { render } from '@test-utils'; +import ComputerScreen from './computer-screen'; + +describe('ComputerScreen', () => { + it('renders a computer screen icon', () => { + const { container } = render(<ComputerScreen />); + expect(container).toBeDefined(); + }); +}); diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx new file mode 100644 index 0000000..c9c869d --- /dev/null +++ b/src/components/atoms/icons/computer-screen.tsx @@ -0,0 +1,72 @@ +import { FC } from 'react'; +import styles from './computer-screen.module.scss'; + +/** + * ComputerScreen component + * + * Render a computer screen svg icon. + */ +const ComputerScreen: FC = () => { + return ( + <svg + viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg" + className={styles.icon} + > + <path + d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z" + className={styles.contour} + /> + <path + d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z" + className={styles.screen} + /> + <path + d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z" + className={`${styles.stand} ${styles['stand--top']}`} + /> + <path + d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z" + className={`${styles.stand} ${styles['stand--bottom']}`} + /> + <path + d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z" + className={styles.line} + /> + <path + d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z" + className={styles.line} + /> + <path + d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z" + className={styles.line} + /> + <path + d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z" + className={styles.cursor} + /> + <path + d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z" + className={styles.text} + /> + <path + d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z" + className={styles.text} + /> + <path + d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z" + className={styles.text} + /> + <path + d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z" + className={styles.separator} + /> + <path + d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z" + className={styles.root} + /> + </svg> + ); +}; + +export default ComputerScreen; |