From 837e0e904c40f7b87561c34ca3f49edd5d8d1c52 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 28 Sep 2023 18:03:43 +0200 Subject: feat(components): replace icons with a generic Icon component Sizes are also predefined and can be set using the `size` prop, so the consumers should no longer adjust the size in CSS. --- src/components/atoms/icons/arrow.module.scss | 16 -- src/components/atoms/icons/arrow.stories.tsx | 61 ------- src/components/atoms/icons/arrow.test.tsx | 10 - src/components/atoms/icons/arrow.tsx | 103 ----------- src/components/atoms/icons/career.module.scss | 53 ------ src/components/atoms/icons/career.stories.tsx | 47 ----- src/components/atoms/icons/career.test.tsx | 10 - src/components/atoms/icons/career.tsx | 65 ------- src/components/atoms/icons/cc-by-sa.module.scss | 7 - src/components/atoms/icons/cc-by-sa.stories.tsx | 34 ---- src/components/atoms/icons/cc-by-sa.test.tsx | 10 - src/components/atoms/icons/cc-by-sa.tsx | 39 ---- src/components/atoms/icons/close.module.scss | 12 -- src/components/atoms/icons/close.stories.tsx | 47 ----- src/components/atoms/icons/close.test.tsx | 10 - src/components/atoms/icons/close.tsx | 29 --- src/components/atoms/icons/cog.module.scss | 8 - src/components/atoms/icons/cog.stories.tsx | 47 ----- src/components/atoms/icons/cog.test.tsx | 10 - src/components/atoms/icons/cog.tsx | 23 --- .../atoms/icons/computer-screen.module.scss | 39 ---- .../atoms/icons/computer-screen.stories.tsx | 47 ----- .../atoms/icons/computer-screen.test.tsx | 10 - src/components/atoms/icons/computer-screen.tsx | 76 -------- src/components/atoms/icons/envelop.module.scss | 28 --- src/components/atoms/icons/envelop.stories.tsx | 47 ----- src/components/atoms/icons/envelop.test.tsx | 10 - src/components/atoms/icons/envelop.tsx | 61 ------- src/components/atoms/icons/feed.module.scss | 6 - src/components/atoms/icons/feed.stories.tsx | 47 ----- src/components/atoms/icons/feed.test.tsx | 10 - src/components/atoms/icons/feed.tsx | 68 ------- src/components/atoms/icons/hamburger.module.scss | 42 ----- src/components/atoms/icons/hamburger.stories.tsx | 47 ----- src/components/atoms/icons/hamburger.test.tsx | 10 - src/components/atoms/icons/hamburger.tsx | 29 --- src/components/atoms/icons/home.module.scss | 41 ----- src/components/atoms/icons/home.stories.tsx | 47 ----- src/components/atoms/icons/home.test.tsx | 10 - src/components/atoms/icons/home.tsx | 49 ----- src/components/atoms/icons/index.ts | 15 -- .../atoms/icons/magnifying-glass.module.scss | 29 --- .../atoms/icons/magnifying-glass.stories.tsx | 47 ----- .../atoms/icons/magnifying-glass.test.tsx | 10 - src/components/atoms/icons/magnifying-glass.tsx | 40 ---- src/components/atoms/icons/moon.module.scss | 8 - src/components/atoms/icons/moon.stories.tsx | 60 ------ src/components/atoms/icons/moon.test.tsx | 10 - src/components/atoms/icons/moon.tsx | 23 --- src/components/atoms/icons/plus-minus.module.scss | 39 ---- src/components/atoms/icons/plus-minus.stories.tsx | 49 ----- src/components/atoms/icons/plus-minus.test.tsx | 10 - src/components/atoms/icons/plus-minus.tsx | 29 --- src/components/atoms/icons/posts-stack.module.scss | 22 --- src/components/atoms/icons/posts-stack.stories.tsx | 47 ----- src/components/atoms/icons/posts-stack.test.tsx | 10 - src/components/atoms/icons/posts-stack.tsx | 72 -------- src/components/atoms/icons/sun.module.scss | 8 - src/components/atoms/icons/sun.stories.tsx | 60 ------ src/components/atoms/icons/sun.test.tsx | 10 - src/components/atoms/icons/sun.tsx | 28 --- .../hamburger-icon/hamburger-icon.module.scss | 45 +++++ .../images/icons/hamburger-icon/hamburger-icon.tsx | 25 +++ .../atoms/images/icons/hamburger-icon/index.ts | 1 + src/components/atoms/images/icons/icon.module.scss | 53 ++++++ src/components/atoms/images/icons/icon.stories.tsx | 201 +++++++++++++++++++++ src/components/atoms/images/icons/icon.test.tsx | 182 +++++++++++++++++++ src/components/atoms/images/icons/icon.tsx | 126 +++++++++++++ src/components/atoms/images/icons/index.ts | 1 + .../atoms/images/icons/plus-minus-icon/index.ts | 1 + .../plus-minus-icon/plus-minus-icon.module.scss | 38 ++++ .../icons/plus-minus-icon/plus-minus-icon.tsx | 30 +++ .../svg-paths/icons-paths/arrow-icon-paths.tsx | 51 ++++++ .../icons-paths/career-icon-paths.module.scss | 43 +++++ .../svg-paths/icons-paths/career-icon-paths.tsx | 57 ++++++ .../svg-paths/icons-paths/cc-by-sa-icon-paths.tsx | 20 ++ .../icons/svg-paths/icons-paths/cog-icon-paths.tsx | 14 ++ .../icons-paths/computer-icon-paths.module.scss | 37 ++++ .../svg-paths/icons-paths/computer-icon-paths.tsx | 65 +++++++ .../icons-paths/cross-icon-paths.module.scss | 5 + .../svg-paths/icons-paths/cross-icon-paths.tsx | 21 +++ .../icons-paths/envelop-icon-paths.module.scss | 22 +++ .../svg-paths/icons-paths/envelop-icon-paths.tsx | 53 ++++++ .../svg-paths/icons-paths/feed-icon-paths.tsx | 59 ++++++ .../icons-paths/home-icon-paths.module.scss | 25 +++ .../svg-paths/icons-paths/home-icon-paths.tsx | 41 +++++ .../images/icons/svg-paths/icons-paths/index.ts | 13 ++ .../magnifying-glass-icon-paths.module.scss | 20 ++ .../icons-paths/magnifying-glass-icon-paths.tsx | 29 +++ .../svg-paths/icons-paths/moon-icon-paths.tsx | 11 ++ .../icons-paths/posts-stack-icon-paths.module.scss | 21 +++ .../icons-paths/posts-stack-icon-paths.tsx | 49 +++++ .../icons/svg-paths/icons-paths/sun-icon-paths.tsx | 11 ++ .../atoms/images/icons/svg-paths/index.ts | 1 + .../atoms/images/icons/svg-paths/svg-paths.tsx | 82 +++++++++ src/components/atoms/images/index.ts | 1 + src/components/atoms/index.ts | 1 - src/components/atoms/layout/copyright.module.scss | 2 - src/components/atoms/layout/copyright.stories.tsx | 6 +- src/components/atoms/layout/copyright.test.tsx | 15 +- src/components/atoms/links/nav-link.module.scss | 1 - 101 files changed, 1465 insertions(+), 2005 deletions(-) delete mode 100644 src/components/atoms/icons/arrow.module.scss delete mode 100644 src/components/atoms/icons/arrow.stories.tsx delete mode 100644 src/components/atoms/icons/arrow.test.tsx delete mode 100644 src/components/atoms/icons/arrow.tsx delete mode 100644 src/components/atoms/icons/career.module.scss delete mode 100644 src/components/atoms/icons/career.stories.tsx delete mode 100644 src/components/atoms/icons/career.test.tsx delete mode 100644 src/components/atoms/icons/career.tsx delete mode 100644 src/components/atoms/icons/cc-by-sa.module.scss delete mode 100644 src/components/atoms/icons/cc-by-sa.stories.tsx delete mode 100644 src/components/atoms/icons/cc-by-sa.test.tsx delete mode 100644 src/components/atoms/icons/cc-by-sa.tsx delete mode 100644 src/components/atoms/icons/close.module.scss delete mode 100644 src/components/atoms/icons/close.stories.tsx delete mode 100644 src/components/atoms/icons/close.test.tsx delete mode 100644 src/components/atoms/icons/close.tsx delete mode 100644 src/components/atoms/icons/cog.module.scss delete mode 100644 src/components/atoms/icons/cog.stories.tsx delete mode 100644 src/components/atoms/icons/cog.test.tsx delete mode 100644 src/components/atoms/icons/cog.tsx delete mode 100644 src/components/atoms/icons/computer-screen.module.scss delete mode 100644 src/components/atoms/icons/computer-screen.stories.tsx delete mode 100644 src/components/atoms/icons/computer-screen.test.tsx delete mode 100644 src/components/atoms/icons/computer-screen.tsx delete mode 100644 src/components/atoms/icons/envelop.module.scss delete mode 100644 src/components/atoms/icons/envelop.stories.tsx delete mode 100644 src/components/atoms/icons/envelop.test.tsx delete mode 100644 src/components/atoms/icons/envelop.tsx delete mode 100644 src/components/atoms/icons/feed.module.scss delete mode 100644 src/components/atoms/icons/feed.stories.tsx delete mode 100644 src/components/atoms/icons/feed.test.tsx delete mode 100644 src/components/atoms/icons/feed.tsx delete mode 100644 src/components/atoms/icons/hamburger.module.scss delete mode 100644 src/components/atoms/icons/hamburger.stories.tsx delete mode 100644 src/components/atoms/icons/hamburger.test.tsx delete mode 100644 src/components/atoms/icons/hamburger.tsx delete mode 100644 src/components/atoms/icons/home.module.scss delete mode 100644 src/components/atoms/icons/home.stories.tsx delete mode 100644 src/components/atoms/icons/home.test.tsx delete mode 100644 src/components/atoms/icons/home.tsx delete mode 100644 src/components/atoms/icons/index.ts delete mode 100644 src/components/atoms/icons/magnifying-glass.module.scss delete mode 100644 src/components/atoms/icons/magnifying-glass.stories.tsx delete mode 100644 src/components/atoms/icons/magnifying-glass.test.tsx delete mode 100644 src/components/atoms/icons/magnifying-glass.tsx delete mode 100644 src/components/atoms/icons/moon.module.scss delete mode 100644 src/components/atoms/icons/moon.stories.tsx delete mode 100644 src/components/atoms/icons/moon.test.tsx delete mode 100644 src/components/atoms/icons/moon.tsx delete mode 100644 src/components/atoms/icons/plus-minus.module.scss delete mode 100644 src/components/atoms/icons/plus-minus.stories.tsx delete mode 100644 src/components/atoms/icons/plus-minus.test.tsx delete mode 100644 src/components/atoms/icons/plus-minus.tsx delete mode 100644 src/components/atoms/icons/posts-stack.module.scss delete mode 100644 src/components/atoms/icons/posts-stack.stories.tsx delete mode 100644 src/components/atoms/icons/posts-stack.test.tsx delete mode 100644 src/components/atoms/icons/posts-stack.tsx delete mode 100644 src/components/atoms/icons/sun.module.scss delete mode 100644 src/components/atoms/icons/sun.stories.tsx delete mode 100644 src/components/atoms/icons/sun.test.tsx delete mode 100644 src/components/atoms/icons/sun.tsx create mode 100644 src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss create mode 100644 src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx create mode 100644 src/components/atoms/images/icons/hamburger-icon/index.ts create mode 100644 src/components/atoms/images/icons/icon.module.scss create mode 100644 src/components/atoms/images/icons/icon.stories.tsx create mode 100644 src/components/atoms/images/icons/icon.test.tsx create mode 100644 src/components/atoms/images/icons/icon.tsx create mode 100644 src/components/atoms/images/icons/index.ts create mode 100644 src/components/atoms/images/icons/plus-minus-icon/index.ts create mode 100644 src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss create mode 100644 src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/index.ts create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx create mode 100644 src/components/atoms/images/icons/svg-paths/index.ts create mode 100644 src/components/atoms/images/icons/svg-paths/svg-paths.tsx (limited to 'src/components/atoms') diff --git a/src/components/atoms/icons/arrow.module.scss b/src/components/atoms/icons/arrow.module.scss deleted file mode 100644 index 6ee3364..0000000 --- a/src/components/atoms/icons/arrow.module.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - fill: var(--color-primary); - transition: all 0.25s ease-in-out 0s; - - &--left, - &--right { - width: var(--icon-size, #{fun.convert-px(30)}); - } - - &--bottom, - &--top { - height: var(--icon-size, #{fun.convert-px(30)}); - } -} diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx deleted file mode 100644 index a49be55..0000000 --- a/src/components/atoms/icons/arrow.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Arrow as ArrowIcon } from './arrow'; - -/** - * Arrow icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: ArrowIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - direction: { - control: { - type: 'select', - }, - description: 'An arrow icon.', - options: ['bottom', 'left', 'right', 'top'], - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Arrow - */ -export const Arrow = Template.bind({}); -Arrow.args = { - direction: 'right', -}; diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx deleted file mode 100644 index 3fedf9b..0000000 --- a/src/components/atoms/icons/arrow.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Arrow } from './arrow'; - -describe('Arrow', () => { - it('renders an arrow icon oriented to the right', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx deleted file mode 100644 index 2ef0185..0000000 --- a/src/components/atoms/icons/arrow.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './arrow.module.scss'; - -export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; - -export type ArrowProps = SVGAttributes & { - /** - * The arrow direction. Default: right. - */ - direction: ArrowDirection; -}; - -/** - * Arrow component - * - * Render a svg arrow icon. - */ -export const Arrow: FC = ({ - className = '', - direction, - ...props -}) => { - const directionClass = styles[`icon--${direction}`]; - const classes = `${styles.icon} ${directionClass} ${className}`; - - if (direction === 'top') { - return ( - - - - - ); - } - - if (direction === 'bottom') { - return ( - - - - - ); - } - - if (direction === 'left') { - return ( - - - - - ); - } - - return ( - - - - - ); -}; diff --git a/src/components/atoms/icons/career.module.scss b/src/components/atoms/icons/career.module.scss deleted file mode 100644 index 0731526..0000000 --- a/src/components/atoms/icons/career.module.scss +++ /dev/null @@ -1,53 +0,0 @@ -@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 deleted file mode 100644 index 5c3ae12..0000000 --- a/src/components/atoms/icons/career.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Career as CareerIcon } from './career'; - -/** - * Career icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CareerIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Career - */ -export const Career = Template.bind({}); diff --git a/src/components/atoms/icons/career.test.tsx b/src/components/atoms/icons/career.test.tsx deleted file mode 100644 index 27754a8..0000000 --- a/src/components/atoms/icons/career.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Career } from './career'; - -describe('Career', () => { - it('renders a Career icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx deleted file mode 100644 index 6456d40..0000000 --- a/src/components/atoms/icons/career.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './career.module.scss'; - -export type CareerProps = SVGAttributes; - -/** - * Career Component - * - * Render a career svg icon. - */ -export const Career: FC = ({ className = '', ...props }) => { - return ( - - - - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/cc-by-sa.module.scss b/src/components/atoms/icons/cc-by-sa.module.scss deleted file mode 100644 index 14935b6..0000000 --- a/src/components/atoms/icons/cc-by-sa.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(60)}); - fill: var(--color-fg); -} diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx deleted file mode 100644 index 2a29ee3..0000000 --- a/src/components/atoms/icons/cc-by-sa.stories.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CCBySA as CCBySAIcon } from './cc-by-sa'; - -/** - * CC BY SA icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CCBySAIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - CC BY SA - */ -export const CCBySA = Template.bind({}); diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx deleted file mode 100644 index 7e81835..0000000 --- a/src/components/atoms/icons/cc-by-sa.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { CCBySA } from './cc-by-sa'; - -describe('CCBySA', () => { - it('renders a CC BY SA icon', () => { - render(); - expect(screen.getByTitle('CC BY SA')).toBeInTheDocument(); - }); -}); diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx deleted file mode 100644 index ba6d278..0000000 --- a/src/components/atoms/icons/cc-by-sa.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './cc-by-sa.module.scss'; - -export type CCBySAProps = SVGAttributes; - -/** - * CCBySA component - * - * Render a CC BY SA svg icon. - */ -export const CCBySA: FC = ({ className = '', ...props }) => { - const intl = useIntl(); - - return ( - - - {intl.formatMessage({ - defaultMessage: 'CC BY SA', - description: 'CCBySA: icon title', - id: 'cl7YNU', - })} - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/close.module.scss b/src/components/atoms/icons/close.module.scss deleted file mode 100644 index a90391a..0000000 --- a/src/components/atoms/icons/close.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.line { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx deleted file mode 100644 index d075141..0000000 --- a/src/components/atoms/icons/close.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Close as CloseIcon } from './close'; - -/** - * Close icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CloseIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Close - */ -export const Close = Template.bind({}); diff --git a/src/components/atoms/icons/close.test.tsx b/src/components/atoms/icons/close.test.tsx deleted file mode 100644 index b2f325c..0000000 --- a/src/components/atoms/icons/close.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Close } from './close'; - -describe('Close', () => { - it('renders a Close icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx deleted file mode 100644 index 5db8620..0000000 --- a/src/components/atoms/icons/close.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './close.module.scss'; - -export type CloseProps = SVGAttributes; - -/** - * Close component - * - * Render a close svg icon. - */ -export const Close: FC = ({ className = '', ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/atoms/icons/cog.module.scss b/src/components/atoms/icons/cog.module.scss deleted file mode 100644 index feda6ce..0000000 --- a/src/components/atoms/icons/cog.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - width: var(--icon-size, #{fun.convert-px(40)}); - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx deleted file mode 100644 index 1b6d440..0000000 --- a/src/components/atoms/icons/cog.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Cog as CogIcon } from './cog'; - -/** - * Cogs icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: CogIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Cogs - */ -export const Cog = Template.bind({}); diff --git a/src/components/atoms/icons/cog.test.tsx b/src/components/atoms/icons/cog.test.tsx deleted file mode 100644 index f4ea71b..0000000 --- a/src/components/atoms/icons/cog.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Cog } from './cog'; - -describe('Cog', () => { - it('renders a Cog icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx deleted file mode 100644 index 6e44708..0000000 --- a/src/components/atoms/icons/cog.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './cog.module.scss'; - -export type CogProps = SVGAttributes; - -/** - * Cog component - * - * Render a cog svg icon. - */ -export const Cog: FC = ({ className = '', ...props }) => { - return ( - - - - - ); -}; diff --git a/src/components/atoms/icons/computer-screen.module.scss b/src/components/atoms/icons/computer-screen.module.scss deleted file mode 100644 index fcc4002..0000000 --- a/src/components/atoms/icons/computer-screen.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@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 deleted file mode 100644 index d4b257b..0000000 --- a/src/components/atoms/icons/computer-screen.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ComputerScreen as ComputerScreenIcon } from './computer-screen'; - -/** - * Computer Screen icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: ComputerScreenIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Computer Screen - */ -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 deleted file mode 100644 index 5a61c9b..0000000 --- a/src/components/atoms/icons/computer-screen.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { ComputerScreen } from './computer-screen'; - -describe('ComputerScreen', () => { - it('renders a computer screen icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx deleted file mode 100644 index 32f41a0..0000000 --- a/src/components/atoms/icons/computer-screen.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './computer-screen.module.scss'; - -export type ComputerScreenProps = SVGAttributes; - -/** - * ComputerScreen component - * - * Render a computer screen svg icon. - */ -export const ComputerScreen: FC = ({ - className = '', - ...props -}) => { - return ( - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/envelop.module.scss b/src/components/atoms/icons/envelop.module.scss deleted file mode 100644 index 584fe97..0000000 --- a/src/components/atoms/icons/envelop.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.envelop { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.lines { - fill: var(--color-fg); -} - -.background { - fill: var(--color-shadow-dark); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.paper { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx deleted file mode 100644 index 666cd86..0000000 --- a/src/components/atoms/icons/envelop.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Envelop as EnvelopIcon } from './envelop'; - -/** - * Envelop icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: EnvelopIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Envelop - */ -export const Envelop = Template.bind({}); diff --git a/src/components/atoms/icons/envelop.test.tsx b/src/components/atoms/icons/envelop.test.tsx deleted file mode 100644 index 82ed575..0000000 --- a/src/components/atoms/icons/envelop.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Envelop } from './envelop'; - -describe('Envelop', () => { - it('renders an envelop icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx deleted file mode 100644 index 968c51f..0000000 --- a/src/components/atoms/icons/envelop.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './envelop.module.scss'; - -export type EnvelopProps = SVGAttributes; - -/** - * Envelop Component - * - * Render an envelop svg icon. - */ -export const Envelop: FC = ({ className = '', ...props }) => { - return ( - - - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/feed.module.scss b/src/components/atoms/icons/feed.module.scss deleted file mode 100644 index bf15c23..0000000 --- a/src/components/atoms/icons/feed.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} diff --git a/src/components/atoms/icons/feed.stories.tsx b/src/components/atoms/icons/feed.stories.tsx deleted file mode 100644 index 1a297e9..0000000 --- a/src/components/atoms/icons/feed.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Feed as FeedIcon } from './feed'; - -/** - * Feed icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: FeedIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Feed - */ -export const Feed = Template.bind({}); diff --git a/src/components/atoms/icons/feed.test.tsx b/src/components/atoms/icons/feed.test.tsx deleted file mode 100644 index 5a91483..0000000 --- a/src/components/atoms/icons/feed.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Feed } from './feed'; - -describe('Feed', () => { - it('renders a feed icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/feed.tsx b/src/components/atoms/icons/feed.tsx deleted file mode 100644 index 40b3156..0000000 --- a/src/components/atoms/icons/feed.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './feed.module.scss'; - -export type FeedProps = SVGAttributes; - -/** - * Feed Component - * - * Render a feed svg icon. - */ -export const Feed: FC = ({ className = '', ...props }) => { - return ( - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/hamburger.module.scss b/src/components/atoms/icons/hamburger.module.scss deleted file mode 100644 index c92b3ab..0000000 --- a/src/components/atoms/icons/hamburger.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.wrapper { - display: flex; - align-items: center; - width: var(--icon-size, #{fun.convert-px(50)}); - height: var(--icon-size, #{fun.convert-px(50)}); - position: relative; -} - -.icon { - &, - &::before, - &::after { - display: block; - height: fun.convert-px(7); - width: 100%; - position: absolute; - background: var(--color-primary-lighter); - background-image: linear-gradient( - to right, - var(--color-primary-light) 0%, - var(--color-primary-lighter) 100% - ); - border: fun.convert-px(1) solid var(--color-primary-darker); - border-radius: fun.convert-px(3); - transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s; - } - - &::before, - &::after { - content: ""; - } - - &::before { - top: fun.convert-px(-15); - } - - &::after { - bottom: fun.convert-px(-15); - } -} diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx deleted file mode 100644 index b2416c6..0000000 --- a/src/components/atoms/icons/hamburger.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Hamburger as HamburgerIcon } from './hamburger'; - -/** - * Hamburger icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: HamburgerIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the icon wrapper.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - iconClassName: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the icon.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Hamburger - */ -export const Hamburger = Template.bind({}); diff --git a/src/components/atoms/icons/hamburger.test.tsx b/src/components/atoms/icons/hamburger.test.tsx deleted file mode 100644 index d7a17b6..0000000 --- a/src/components/atoms/icons/hamburger.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Hamburger } from './hamburger'; - -describe('Hamburger', () => { - it('renders a Hamburger icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx deleted file mode 100644 index cc4e7b9..0000000 --- a/src/components/atoms/icons/hamburger.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import styles from './hamburger.module.scss'; - -export type HamburgerProps = { - /** - * Set additional classnames to the icon wrapper. - */ - className?: string; - /** - * Set additional classnames to the icon. - */ - iconClassName?: string; -}; - -/** - * Hamburger component - * - * Render a Hamburger icon. - */ -export const Hamburger: FC = ({ - className = '', - iconClassName = '', -}) => { - return ( - - - - ); -}; diff --git a/src/components/atoms/icons/home.module.scss b/src/components/atoms/icons/home.module.scss deleted file mode 100644 index 8ed05a0..0000000 --- a/src/components/atoms/icons/home.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.wall { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.indoor { - fill: var(--color-shadow-dark); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.door { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.roof { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.chimney { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} - -.lines { - fill: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx deleted file mode 100644 index 7492af7..0000000 --- a/src/components/atoms/icons/home.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Home as HomeIcon } from './home'; - -/** - * Home icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: HomeIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Home - */ -export const Home = Template.bind({}); diff --git a/src/components/atoms/icons/home.test.tsx b/src/components/atoms/icons/home.test.tsx deleted file mode 100644 index e7d03d9..0000000 --- a/src/components/atoms/icons/home.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Home } from './home'; - -describe('Home', () => { - it('renders a home icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx deleted file mode 100644 index 0081f37..0000000 --- a/src/components/atoms/icons/home.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './home.module.scss'; - -export type HomeProps = SVGAttributes; - -/** - * Home component. - * - * Render a home svg icon. - */ -export const Home: FC = ({ className = '', ...props }) => { - return ( - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/index.ts b/src/components/atoms/icons/index.ts deleted file mode 100644 index 1b413ba..0000000 --- a/src/components/atoms/icons/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -export * from './arrow'; -export * from './career'; -export * from './cc-by-sa'; -export * from './close'; -export * from './cog'; -export * from './computer-screen'; -export * from './envelop'; -export * from './feed'; -export * from './hamburger'; -export * from './home'; -export * from './magnifying-glass'; -export * from './moon'; -export * from './plus-minus'; -export * from './posts-stack'; -export * from './sun'; diff --git a/src/components/atoms/icons/magnifying-glass.module.scss b/src/components/atoms/icons/magnifying-glass.module.scss deleted file mode 100644 index 33a82d6..0000000 --- a/src/components/atoms/icons/magnifying-glass.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.big-handle { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.glass { - fill: var(--color-bg-opacity); - stroke: var(--color-primary-darker); - stroke-width: 2; -} - -.upright { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 3; -} - -.small-handle { - fill: var(--color-primary); - stroke: var(--color-primary-darker); - stroke-width: 2; -} diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx deleted file mode 100644 index 7dec505..0000000 --- a/src/components/atoms/icons/magnifying-glass.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { MagnifyingGlass as MagnifyingGlassIcon } from './magnifying-glass'; - -/** - * Magnifying Glass icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: MagnifyingGlassIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Magnifying Glass - */ -export const MagnifyingGlass = Template.bind({}); diff --git a/src/components/atoms/icons/magnifying-glass.test.tsx b/src/components/atoms/icons/magnifying-glass.test.tsx deleted file mode 100644 index 5cff75b..0000000 --- a/src/components/atoms/icons/magnifying-glass.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { MagnifyingGlass } from './magnifying-glass'; - -describe('MagnifyingGlass', () => { - it('renders a magnifying glass icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx deleted file mode 100644 index 619adef..0000000 --- a/src/components/atoms/icons/magnifying-glass.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './magnifying-glass.module.scss'; - -export type MagnifyingGlassProps = SVGAttributes; - -/** - * MagnifyingGlass component - * - * Render a magnifying glass svg icon. - */ -export const MagnifyingGlass: FC = ({ - className = '', - ...props -}) => { - return ( - - - - - - - ); -}; diff --git a/src/components/atoms/icons/moon.module.scss b/src/components/atoms/icons/moon.module.scss deleted file mode 100644 index f2564a9..0000000 --- a/src/components/atoms/icons/moon.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; - width: var(--icon-size, #{fun.convert-px(25)}); -} diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx deleted file mode 100644 index a8faf03..0000000 --- a/src/components/atoms/icons/moon.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Moon as MoonIcon } from './moon'; - -/** - * Moon icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: MoonIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The SVG title.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Moon - */ -export const Moon = Template.bind({}); diff --git a/src/components/atoms/icons/moon.test.tsx b/src/components/atoms/icons/moon.test.tsx deleted file mode 100644 index b164ecd..0000000 --- a/src/components/atoms/icons/moon.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Moon } from './moon'; - -describe('Moon', () => { - it('renders a moon icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx deleted file mode 100644 index 2139ce1..0000000 --- a/src/components/atoms/icons/moon.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './moon.module.scss'; - -export type MoonProps = SVGAttributes & { - /** - * The SVG title. - */ - title?: string; -}; - -export const Moon: FC = ({ className = '', title, ...props }) => { - return ( - - {title ? {title} : null} - - - ); -}; diff --git a/src/components/atoms/icons/plus-minus.module.scss b/src/components/atoms/icons/plus-minus.module.scss deleted file mode 100644 index b46b5ba..0000000 --- a/src/components/atoms/icons/plus-minus.module.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: flex; - place-content: center; - place-items: center; - width: var(--icon-size, #{fun.convert-px(30)}); - height: var(--icon-size, #{fun.convert-px(30)}); - position: relative; - background: var(--color-bg); - border: fun.convert-px(1) solid var(--color-primary); - border-radius: fun.convert-px(3); - color: var(--color-primary); - - &::before, - &::after { - content: ""; - position: absolute; - background: var(--color-primary); - transition: transform 0.4s ease-out 0s; - } - - &::after { - height: fun.convert-px(3); - width: 60%; - } - - &::before { - height: 60%; - width: fun.convert-px(3); - transform: scaleY(1); - } - - &--minus { - &::before { - transform: scaleY(0); - } - } -} diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx deleted file mode 100644 index c556076..0000000 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PlusMinus as PlusMinusIcon } from './plus-minus'; - -/** - * Plus/Minus icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: PlusMinusIcon, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - state: { - control: { - type: 'radio', - }, - description: 'Which state should be displayed.', - options: ['plus', 'minus'], - type: { - name: 'enum', - required: true, - value: ['plus', 'minus'], - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Plus/Minus - */ -export const PlusMinus = Template.bind({}); -PlusMinus.args = { - state: 'plus', -}; diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx deleted file mode 100644 index 6307401..0000000 --- a/src/components/atoms/icons/plus-minus.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { PlusMinus } from './plus-minus'; - -describe('PlusMinus', () => { - it('renders a plus/minus icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx deleted file mode 100644 index e2eb55e..0000000 --- a/src/components/atoms/icons/plus-minus.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { FC } from 'react'; -import styles from './plus-minus.module.scss'; - -export type PlusMinusProps = { - /** - * Set additional classnames to the icon. - */ - className?: string; - /** - * Which state should be displayed. - */ - state: 'plus' | 'minus'; -}; - -/** - * PlusMinus component - * - * Render a plus or a minus icon. - */ -export const PlusMinus: FC = ({ className = '', state }) => { - const stateClass = `icon--${state}`; - - return ( -
- ); -}; diff --git a/src/components/atoms/icons/posts-stack.module.scss b/src/components/atoms/icons/posts-stack.module.scss deleted file mode 100644 index aa1f4f0..0000000 --- a/src/components/atoms/icons/posts-stack.module.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.icon { - display: block; - width: var(--icon-size, #{fun.convert-px(40)}); -} - -.lines { - fill: var(--color-fg); - stroke-width: 4; -} - -.picture { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); -} - -.background { - fill: var(--color-bg); - stroke: var(--color-primary-darker); - stroke-width: 4; -} diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx deleted file mode 100644 index 7daeecf..0000000 --- a/src/components/atoms/icons/posts-stack.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { PostsStack as PostsStackIcon } from './posts-stack'; - -/** - * Posts Stack icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: PostsStackIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Posts Stack - */ -export const PostsStack = Template.bind({}); diff --git a/src/components/atoms/icons/posts-stack.test.tsx b/src/components/atoms/icons/posts-stack.test.tsx deleted file mode 100644 index 068fbea..0000000 --- a/src/components/atoms/icons/posts-stack.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { PostsStack } from './posts-stack'; - -describe('PostsStack', () => { - it('renders a posts stack icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx deleted file mode 100644 index c783892..0000000 --- a/src/components/atoms/icons/posts-stack.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './posts-stack.module.scss'; - -export type PostsStackProps = SVGAttributes; - -/** - * Posts stack component. - * - * Render a posts stack svg icon. - */ -export const PostsStack: FC = ({ - className = '', - ...props -}) => { - return ( - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/atoms/icons/sun.module.scss b/src/components/atoms/icons/sun.module.scss deleted file mode 100644 index 8d9683f..0000000 --- a/src/components/atoms/icons/sun.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; - -.sun { - fill: var(--color-primary-lighter); - stroke: var(--color-primary-darker); - stroke-width: 4; - width: var(--icon-size, #{fun.convert-px(25)}); -} diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx deleted file mode 100644 index a332bcd..0000000 --- a/src/components/atoms/icons/sun.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Sun as SunIcon } from './sun'; - -/** - * Sun icon - Storybook Meta - */ -export default { - title: 'Atoms/Illustrations/Icons', - component: SunIcon, - argTypes: { - 'aria-hidden': { - control: { - type: null, - }, - description: 'Should the svg be hidden from assistive technologies?', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - title: { - control: { - type: 'text', - }, - description: 'The SVG title.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Icons Stories - Sun - */ -export const Sun = Template.bind({}); diff --git a/src/components/atoms/icons/sun.test.tsx b/src/components/atoms/icons/sun.test.tsx deleted file mode 100644 index 2aa916b..0000000 --- a/src/components/atoms/icons/sun.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render } from '../../../../tests/utils'; -import { Sun } from './sun'; - -describe('Sun', () => { - it('renders a sun icon', () => { - const { container } = render(); - expect(container).toBeDefined(); - }); -}); diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx deleted file mode 100644 index 69a3044..0000000 --- a/src/components/atoms/icons/sun.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { FC, SVGAttributes } from 'react'; -import styles from './sun.module.scss'; - -export type SunProps = SVGAttributes & { - /** - * The SVG title. - */ - title?: string; -}; - -/** - * Sun component. - * - * Render a svg sun icon. - */ -export const Sun: FC = ({ className = '', title, ...props }) => { - return ( - - {title !== 'undefined' && {title}} - - - ); -}; diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss new file mode 100644 index 0000000..8b8ad7e --- /dev/null +++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.module.scss @@ -0,0 +1,45 @@ +@use "../../../../../styles/abstracts/functions" as fun; + +.wrapper { + display: flex; + align-items: center; + aspect-ratio: 1/1; + position: relative; +} + +.icon { + width: 100%; + + &, + &::before, + &::after { + display: block; + height: 20%; + background: var(--color-primary-lighter); + background-image: linear-gradient( + to right, + var(--color-primary-light) 0%, + var(--color-primary-lighter) 100% + ); + border: fun.convert-px(1) solid var(--color-primary-darker); + border-radius: fun.convert-px(4); + transition: + all 0.25s ease-in-out 0s, + transform 0.4s ease-in 0s; + } + + &::before, + &::after { + content: ""; + position: absolute; + inset-inline: 0; + } + + &::before { + top: 3%; + } + + &::after { + bottom: 3%; + } +} diff --git a/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx new file mode 100644 index 0000000..edd25ba --- /dev/null +++ b/src/components/atoms/images/icons/hamburger-icon/hamburger-icon.tsx @@ -0,0 +1,25 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './hamburger-icon.module.scss'; + +export type HamburgerIconProps = Omit< + HTMLAttributes, + 'children' +>; + +/** + * HamburgerIcon component + * + * Render a Hamburger icon. + */ +export const HamburgerIcon: FC = ({ + className = '', + ...props +}) => { + const wrapperClass = `${styles.wrapper} ${className}`; + + return ( + + + + ); +}; diff --git a/src/components/atoms/images/icons/hamburger-icon/index.ts b/src/components/atoms/images/icons/hamburger-icon/index.ts new file mode 100644 index 0000000..a601d0c --- /dev/null +++ b/src/components/atoms/images/icons/hamburger-icon/index.ts @@ -0,0 +1 @@ +export * from './hamburger-icon'; diff --git a/src/components/atoms/images/icons/icon.module.scss b/src/components/atoms/images/icons/icon.module.scss new file mode 100644 index 0000000..72eb611 --- /dev/null +++ b/src/components/atoms/images/icons/icon.module.scss @@ -0,0 +1,53 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.icon { + width: var(--icon-size); + transition: all 0.25s ease-in-out 0s; + + &--arrow { + fill: var(--color-primary); + } + + &--cc-by-sa { + width: calc(var(--icon-size) * 2); + fill: var(--color-fg); + } + + &--cog, + &--home, + &--moon, + &--sun { + stroke-width: 4; + } + + &--cog, + &--moon, + &--sun { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + } + + &--stroke { + stroke: var(--color-primary); + } + + &--xs { + --icon-size: var(--icon-size-xs); + } + + &--sm { + --icon-size: var(--icon-size-sm); + } + + &--md { + --icon-size: var(--icon-size-md); + } + + &--lg { + --icon-size: var(--icon-size-lg); + } + + &--xl { + --icon-size: var(--icon-size-xl); + } +} diff --git a/src/components/atoms/images/icons/icon.stories.tsx b/src/components/atoms/images/icons/icon.stories.tsx new file mode 100644 index 0000000..fa8d2b5 --- /dev/null +++ b/src/components/atoms/images/icons/icon.stories.tsx @@ -0,0 +1,201 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Icon, type IconProps, type IconShape } from './icon'; + +/** + * Home icon - Storybook Meta + */ +export default { + title: 'Atoms/Images/Icons', + component: Icon, + argTypes: { + shape: { + control: { + type: 'select', + }, + options: [ + 'arrow', + 'career', + 'cc-by-sa', + 'cog', + 'computer', + 'cross', + 'envelop', + 'feed', + 'hamburger', + 'home', + 'magnifying-glass', + 'minus', + 'moon', + 'posts-stack', + 'plus', + 'sun', + ], + description: 'Define the icon shape.', + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = ({ + shape, + ...args +}: IconProps) => ; + +/** + * Icon Stories - ArrowRight + */ +export const ArrowRight = Template.bind({}); +ArrowRight.args = { + orientation: 'right', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowLeft + */ +export const ArrowLeft = Template.bind({}); +ArrowLeft.args = { + orientation: 'left', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowBottom + */ +export const ArrowBottom = Template.bind({}); +ArrowBottom.args = { + orientation: 'bottom', + shape: 'arrow', +}; + +/** + * Icon Stories - ArrowTop + */ +export const ArrowTop = Template.bind({}); +ArrowTop.args = { + orientation: 'top', + shape: 'arrow', +}; + +/** + * Icon Stories - Career + */ +export const Career = Template.bind({}); +Career.args = { + shape: 'career', +}; + +/** + * Icon Stories - CCBySA + */ +export const CCBySA = Template.bind({}); +CCBySA.args = { + shape: 'cc-by-sa', +}; + +/** + * Icon Stories - Cog + */ +export const Cog = Template.bind({}); +Cog.args = { + shape: 'cog', +}; + +/** + * Icon Stories - Computer + */ +export const Computer = Template.bind({}); +Computer.args = { + shape: 'computer', +}; + +/** + * Icon Stories - Cross + */ +export const Cross = Template.bind({}); +Cross.args = { + shape: 'cross', +}; + +/** + * Icon Stories - Envelop + */ +export const Envelop = Template.bind({}); +Envelop.args = { + shape: 'envelop', +}; + +/** + * Icon Stories - Feed + */ +export const Feed = Template.bind({}); +Feed.args = { + shape: 'feed', +}; + +/** + * Icon Stories - Hamburger + */ +export const Hamburger = Template.bind({}); +Hamburger.args = { + shape: 'hamburger', +}; + +/** + * Icon Stories - Home + */ +export const Home = Template.bind({}); +Home.args = { + shape: 'home', +}; + +/** + * Icon Stories - MagnifyingGlass + */ +export const MagnifyingGlass = Template.bind({}); +MagnifyingGlass.args = { + shape: 'magnifying-glass', +}; + +/** + * Icon Stories - Minus + */ +export const Minus = Template.bind({}); +Minus.args = { + shape: 'minus', +}; + +/** + * Icon Stories - Moon + */ +export const Moon = Template.bind({}); +Moon.args = { + shape: 'moon', +}; + +/** + * Icon Stories - Plus + */ +export const Plus = Template.bind({}); +Plus.args = { + shape: 'plus', +}; + +/** + * Icon Stories - PostsStack + */ +export const PostsStack = Template.bind({}); +PostsStack.args = { + shape: 'posts-stack', +}; + +/** + * Icon Stories - Sun + */ +export const Sun = Template.bind({}); +Sun.args = { + shape: 'sun', +}; diff --git a/src/components/atoms/images/icons/icon.test.tsx b/src/components/atoms/images/icons/icon.test.tsx new file mode 100644 index 0000000..d80edd7 --- /dev/null +++ b/src/components/atoms/images/icons/icon.test.tsx @@ -0,0 +1,182 @@ +/* eslint-disable max-statements */ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Icon } from './icon'; + +/* eslint-disable jsx-a11y/prefer-tag-over-role -- Valid on SVG */ +describe('Icon', () => { + it('can render an icon with a heading', () => { + const heading = 'architecto'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('can render an icon with a description', () => { + const description = 'fuga voluptates eligendi'; + + render(); + + expect(rtlScreen.getByRole('img')).toHaveTextContent(description); + }); + + it('render an icon with bottom arrow shape', () => { + const heading = 'quae'; + + render( + + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with left arrow shape', () => { + const heading = 'nemo'; + + render( + + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with right arrow shape', () => { + const heading = 'odit'; + + render( + + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with top arrow shape', () => { + const heading = 'ut'; + + render( + + ); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with career shape', () => { + const heading = 'autem'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cc-by-sa shape', () => { + const heading = 'blanditiis'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cog shape', () => { + const heading = 'consequatur'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with computer shape', () => { + const heading = 'amet'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with cross shape', () => { + const heading = 'molestias'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with envelop shape', () => { + const heading = 'laudantium'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + it('render an icon with feed shape', () => { + const heading = 'beatae'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with home shape', () => { + const heading = 'aut'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with magnifying glass shape', () => { + const heading = 'rerum'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with moon shape', () => { + const heading = 'saepe'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with posts stack shape', () => { + const heading = 'sunt'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with sun shape', () => { + const heading = 'aut'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with hamburger shape', () => { + const heading = 'sed'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with minus shape', () => { + const heading = 'sunt'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); + + it('render an icon with plus shape', () => { + const heading = 'maxime'; + + render(); + + expect(rtlScreen.getByRole('img', { name: heading })).toBeInTheDocument(); + }); +}); diff --git a/src/components/atoms/images/icons/icon.tsx b/src/components/atoms/images/icons/icon.tsx new file mode 100644 index 0000000..23170d9 --- /dev/null +++ b/src/components/atoms/images/icons/icon.tsx @@ -0,0 +1,126 @@ +import type { SVGAttributes } from 'react'; +import { HamburgerIcon, type HamburgerIconProps } from './hamburger-icon'; +import styles from './icon.module.scss'; +import { + PlusMinusIcon, + type PlusMinusIconProps, + type PlusMinusIconShape, +} from './plus-minus-icon'; +import { type SVGIconShape, SVGPaths, type SVGPathsProps } from './svg-paths'; + +export type IconShape = SVGIconShape | PlusMinusIconShape | 'hamburger'; + +export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; + +type SVGIconProps = Omit< + SVGAttributes, + 'children' | 'viewBox' | 'xmlns' +> & { + /** + * Describe the icon. + */ + description?: string; + /** + * Define an accessible title for the icon. + */ + heading?: string; +}; + +type IconBaseProps = T extends 'hamburger' + ? HamburgerIconProps + : T extends 'minus' | 'plus' + ? PlusMinusIconProps + : SVGIconProps; + +type AdditionalProps = Pick< + SVGPathsProps, + 'orientation' +> & { + /** + * The icon shape. + */ + shape: T; + /** + * The icon size. + * + * @default 'md' + */ + size?: IconSize; +}; + +export type IconProps = IconBaseProps & + Pick & + AdditionalProps; + +type BuildClassNameConfig = Pick< + IconProps, + 'className' +> & + Pick, 'shape' | 'size'>; + +const buildClassName = ({ + className, + shape, + size, +}: BuildClassNameConfig) => { + const classNames = ['icon', `icon--${shape}`, `icon--${size}`].map( + (key) => styles[key] + ); + + if (className) classNames.push(className); + + return classNames.join(' '); +}; + +type ExtractedProps = 'className' | 'orientation' | 'shape' | 'size'; + +export const Icon = ({ + className = '', + orientation, + shape, + size = 'md', + ...props +}: IconProps) => { + const iconClass = buildClassName({ className, shape, size }); + + if (shape === 'hamburger') + return ( + , ExtractedProps>)} + className={iconClass} + /> + ); + + if (shape === 'minus' || shape === 'plus') + return ( + , ExtractedProps>)} + className={iconClass} + shape={shape} + /> + ); + + const viewBox = shape === 'cc-by-sa' ? '0 0 100 40' : '0 0 100 100'; + + // Without casting Typescript complains because of props generic type + const { heading, description, ...remainingProps } = props as Omit< + IconProps, + ExtractedProps + >; + + return ( + + {heading ? {heading} : null} + {description ? {description} : null} + + + ); +}; diff --git a/src/components/atoms/images/icons/index.ts b/src/components/atoms/images/icons/index.ts new file mode 100644 index 0000000..af77d84 --- /dev/null +++ b/src/components/atoms/images/icons/index.ts @@ -0,0 +1 @@ +export * from './icon'; diff --git a/src/components/atoms/images/icons/plus-minus-icon/index.ts b/src/components/atoms/images/icons/plus-minus-icon/index.ts new file mode 100644 index 0000000..acca727 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/index.ts @@ -0,0 +1 @@ +export * from './plus-minus-icon'; diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss new file mode 100644 index 0000000..07550c9 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.module.scss @@ -0,0 +1,38 @@ +@use "../../../../../styles/abstracts/functions" as fun; + +.icon { + display: flex; + place-content: center; + place-items: center; + aspect-ratio: 1/1; + position: relative; + background: var(--color-bg); + border: fun.convert-px(1) solid var(--color-primary); + border-radius: fun.convert-px(3); + color: var(--color-primary); + + &::before, + &::after { + content: ""; + position: absolute; + background: var(--color-primary); + transition: transform 0.4s ease-out 0s; + } + + &::after { + height: fun.convert-px(3); + width: 60%; + } + + &::before { + height: 55%; + width: fun.convert-px(3); + transform: scaleY(1); + } + + &--minus { + &::before { + transform: scaleY(0); + } + } +} diff --git a/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx new file mode 100644 index 0000000..ed6bcf2 --- /dev/null +++ b/src/components/atoms/images/icons/plus-minus-icon/plus-minus-icon.tsx @@ -0,0 +1,30 @@ +import type { FC, HTMLAttributes } from 'react'; +import styles from './plus-minus-icon.module.scss'; + +export type PlusMinusIconShape = 'minus' | 'plus'; + +export type PlusMinusIconProps = Omit< + HTMLAttributes, + 'children' +> & { + /** + * Which shape should be displayed. + */ + shape: PlusMinusIconShape; +}; + +/** + * PlusMinusIcon component + * + * Render a plus or a minus icon. + */ +export const PlusMinusIcon: FC = ({ + className = '', + shape, + ...props +}) => { + const shapeClass = styles[`icon--${shape}`]; + const iconClass = `${styles.icon} ${shapeClass} ${className}`; + + return
; +}; diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx new file mode 100644 index 0000000..ee29d5d --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/arrow-icon-paths.tsx @@ -0,0 +1,51 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +export type ArrowOrientation = 'top' | 'right' | 'bottom' | 'left'; + +const getArrowBarPathFrom = (orientation: ArrowOrientation) => { + switch (orientation) { + case 'bottom': + return 'm 55.749998,2e-6 v 61.764896 h -11.5 V 2e-6 Z'; + case 'left': + return 'M 99.999996,44.25 H 38.2351 v 11.5 h 61.764896 z'; + case 'right': + return 'm 0,44.25 h 61.764896 v 11.5 H 0 Z'; + case 'top': + default: + return 'M 55.749998,99.999998 V 38.235102 h -11.5 v 61.764896 z'; + } +}; + +const getArrowHeadPathFrom = (orientation: ArrowOrientation) => { + switch (orientation) { + case 'bottom': + return 'm 69.999998,61.764898 -20,38.2351 -20,-38.2351 z'; + case 'left': + return 'M 38.2351,30 0,50 38.2351,70 Z'; + case 'right': + return 'm 61.764896,30 38.2351,20 -38.2351,20 z'; + case 'top': + default: + return 'm 69.999998,38.235102 -20,-38.2351 -20,38.2351 z'; + } +}; + +export type ArrowProps = { + /** + * The arrow orientation. + */ + orientation: ArrowOrientation; +}; + +/** + * ArrowIconPaths + * + * Render the svg paths to make an arrow icon. + */ +export const ArrowIconPaths: FC = ({ orientation }) => ( + <> + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss new file mode 100644 index 0000000..f93e73a --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.module.scss @@ -0,0 +1,43 @@ +.bottom, +.diploma, +.lines, +.top { + stroke-width: 4; +} + +.bottom, +.diploma, +.handle, +.lock, +.seal, +.top { + stroke: var(--color-primary-darker); +} + +.bottom { + fill: var(--color-primary); +} + +.diploma, +.lock { + fill: var(--color-bg); +} + +.handle, +.seal, +.top { + fill: var(--color-primary-lighter); +} + +.handle, +.lock { + stroke-width: 3; +} + +.lines { + fill: var(--color-fg); +} + +.seal { + stroke-width: 2; +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx new file mode 100644 index 0000000..8fbaa12 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/career-icon-paths.tsx @@ -0,0 +1,57 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './career-icon-paths.module.scss'; + +/** + * CareerIconPaths + * + * Render the svg paths to make a career icon. + */ +export const CareerIconPaths: FC = () => ( + <> + + + + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx new file mode 100644 index 0000000..5961d92 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cc-by-sa-icon-paths.tsx @@ -0,0 +1,20 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * CCBySAIconPaths + * + * Render the svg paths to make a CC-BY-SA icon. + */ +export const CCBySAIconPaths: FC = () => ( + <> + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx new file mode 100644 index 0000000..1ff9e3c --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cog-icon-paths.tsx @@ -0,0 +1,14 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * CogIconPaths component + * + * Render the svg paths to make a cog icon. + */ +export const CogIconPaths: FC = () => ( + <> + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss new file mode 100644 index 0000000..479b8b7 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.module.scss @@ -0,0 +1,37 @@ +.cursor, +.lines, +.root, +.separator, +.text { + fill: var(--color-fg); +} + +.contour, +.stand, +.screen { + stroke: var(--color-primary-dark); +} + +.contour, +.screen { + stroke-width: 3; +} + +.contour, +.stand { + fill: var(--color-primary-lighter); +} + +.screen { + fill: var(--color-bg); +} + +.stand { + &--top { + stroke-width: 3; + } + + &--bottom { + stroke-width: 2; + } +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx new file mode 100644 index 0000000..f581332 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/computer-icon-paths.tsx @@ -0,0 +1,65 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './computer-icon-paths.module.scss'; + +/** + * ComputerIconPaths + * + * Render the svg paths to make a computer icon. + */ +export const ComputerIconPaths: FC = () => ( + <> + + + + + + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss new file mode 100644 index 0000000..b30fea9 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.module.scss @@ -0,0 +1,5 @@ +.lines { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 3; +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx new file mode 100644 index 0000000..12740af --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/cross-icon-paths.tsx @@ -0,0 +1,21 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './cross-icon-paths.module.scss'; + +/** + * CrossIconPaths + * + * Render the svg paths to make a cross icon. + */ +export const CrossIconPaths: FC = () => ( + <> + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss new file mode 100644 index 0000000..0819bba --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.module.scss @@ -0,0 +1,22 @@ +.bg, +.envelop, +.paper { + stroke: var(--color-primary-darker); + stroke-width: 4; +} + +.bg { + fill: var(--color-shadow-dark); +} + +.envelop { + fill: var(--color-primary-lighter); +} + +.lines { + fill: var(--color-fg); +} + +.paper { + fill: var(--color-bg); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx new file mode 100644 index 0000000..9e23991 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/envelop-icon-paths.tsx @@ -0,0 +1,53 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './envelop-icon-paths.module.scss'; + +/** + * EnvelopIconPaths + * + * Render the svg paths to make an envelop icon. + */ +export const EnvelopIconPaths: FC = () => ( + <> + + + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx new file mode 100644 index 0000000..922bf8a --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/feed-icon-paths.tsx @@ -0,0 +1,59 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * FeedIconPaths + * + * Render the svg paths to make a feed icon. + */ +export const FeedIconPaths: FC = () => ( + <> + + + + + + + + + + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss new file mode 100644 index 0000000..a8d775c --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.module.scss @@ -0,0 +1,25 @@ +.chimney, +.door, +.indoor, +.roof, +.wall { + stroke: var(--color-primary-darker); +} + +.door, +.roof { + fill: var(--color-primary-lighter); +} + +.indoor { + fill: var(--color-shadow-dark); +} + +.chimney, +.wall { + fill: var(--color-bg); +} + +.lines { + fill: var(--color-primary-darker); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx new file mode 100644 index 0000000..d472445 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/home-icon-paths.tsx @@ -0,0 +1,41 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './home-icon-paths.module.scss'; + +/** + * HomeIconPaths + * + * Render the svg paths to make a home icon. + */ +export const HomeIconPaths: FC = () => ( + <> + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts new file mode 100644 index 0000000..43927ae --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/index.ts @@ -0,0 +1,13 @@ +export * from './arrow-icon-paths'; +export * from './career-icon-paths'; +export * from './cc-by-sa-icon-paths'; +export * from './cog-icon-paths'; +export * from './computer-icon-paths'; +export * from './cross-icon-paths'; +export * from './envelop-icon-paths'; +export * from './feed-icon-paths'; +export * from './home-icon-paths'; +export * from './magnifying-glass-icon-paths'; +export * from './moon-icon-paths'; +export * from './posts-stack-icon-paths'; +export * from './sun-icon-paths'; diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss new file mode 100644 index 0000000..4b7db05 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.module.scss @@ -0,0 +1,20 @@ +.big-handle, +.upright { + fill: var(--color-primary-lighter); + stroke: var(--color-primary-darker); + stroke-width: 3; +} + +.glass, +.small-handle { + stroke: var(--color-primary-darker); + stroke-width: 2; +} + +.glass { + fill: var(--color-bg-opacity); +} + +.small-handle { + fill: var(--color-primary); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx new file mode 100644 index 0000000..b800305 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/magnifying-glass-icon-paths.tsx @@ -0,0 +1,29 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './magnifying-glass-icon-paths.module.scss'; + +/** + * MagnifyingGlassIconPaths + * + * Render the svg paths to make a magnifying glass icon. + */ +export const MagnifyingGlassIconPaths: FC = () => ( + <> + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx new file mode 100644 index 0000000..35025ef --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/moon-icon-paths.tsx @@ -0,0 +1,11 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * MoonIconPaths + * + * Render the svg paths to make a moon icon. + */ +export const MoonIconPaths: FC = () => ( + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss new file mode 100644 index 0000000..f368493 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.module.scss @@ -0,0 +1,21 @@ +.bg, +.lines { + stroke-width: 4; +} + +.bg, +.picture { + stroke: var(--color-primary-darker); +} + +.bg { + fill: var(--color-bg); +} + +.lines { + fill: var(--color-fg); +} + +.picture { + fill: var(--color-primary-lighter); +} diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx new file mode 100644 index 0000000..daf14d4 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/posts-stack-icon-paths.tsx @@ -0,0 +1,49 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; +import styles from './posts-stack-icon-paths.module.scss'; + +/** + * PostsStackIconPaths + * + * Render the svg paths to make a posts stack icon. + */ +export const PostsStackIconPaths: FC = () => ( + <> + + + + + + + + + + + + + +); diff --git a/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx new file mode 100644 index 0000000..0cdffb3 --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/icons-paths/sun-icon-paths.tsx @@ -0,0 +1,11 @@ +/* eslint-disable react/jsx-no-literals */ +import type { FC } from 'react'; + +/** + * SunIconPaths + * + * Render the svg paths to make a sun icon. + */ +export const SunIconPaths: FC = () => ( + +); diff --git a/src/components/atoms/images/icons/svg-paths/index.ts b/src/components/atoms/images/icons/svg-paths/index.ts new file mode 100644 index 0000000..01623ef --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/index.ts @@ -0,0 +1 @@ +export * from './svg-paths'; diff --git a/src/components/atoms/images/icons/svg-paths/svg-paths.tsx b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx new file mode 100644 index 0000000..0f5be6e --- /dev/null +++ b/src/components/atoms/images/icons/svg-paths/svg-paths.tsx @@ -0,0 +1,82 @@ +import type { FC } from 'react'; +import { + ArrowIconPaths, + type ArrowOrientation, + CCBySAIconPaths, + CareerIconPaths, + CogIconPaths, + ComputerIconPaths, + EnvelopIconPaths, + FeedIconPaths, + HomeIconPaths, + MagnifyingGlassIconPaths, + MoonIconPaths, + PostsStackIconPaths, + SunIconPaths, + CrossIconPaths, +} from './icons-paths'; + +export type SVGIconOrientation = ArrowOrientation; + +export type SVGIconShape = + | 'arrow' + | 'career' + | 'cc-by-sa' + | 'cog' + | 'computer' + | 'cross' + | 'envelop' + | 'feed' + | 'home' + | 'magnifying-glass' + | 'moon' + | 'posts-stack' + | 'sun'; + +export type SVGPathsProps = { + /** + * The icon orientation. Only used with arrow icon. + * + * @default 'right' + */ + orientation?: SVGIconOrientation; + /** + * The icon shape. + */ + shape: SVGIconShape; +}; + +export const SVGPaths: FC = ({ + orientation = 'right', + shape, +}) => { + switch (shape) { + case 'arrow': + return ; + case 'career': + return ; + case 'cc-by-sa': + return ; + case 'cog': + return ; + case 'computer': + return ; + case 'cross': + return ; + case 'envelop': + return ; + case 'feed': + return ; + case 'home': + return ; + case 'magnifying-glass': + return ; + case 'moon': + return ; + case 'posts-stack': + return ; + case 'sun': + default: + return ; + } +}; diff --git a/src/components/atoms/images/index.ts b/src/components/atoms/images/index.ts index cb6151d..197d909 100644 --- a/src/components/atoms/images/index.ts +++ b/src/components/atoms/images/index.ts @@ -1 +1,2 @@ +export * from './icons'; export * from './logo'; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index e0041cc..abcc198 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -1,7 +1,6 @@ export * from './buttons'; export * from './forms'; export * from './heading'; -export * from './icons'; export * from './images'; export * from './layout'; export * from './links'; diff --git a/src/components/atoms/layout/copyright.module.scss b/src/components/atoms/layout/copyright.module.scss index 5d5435c..ffde516 100644 --- a/src/components/atoms/layout/copyright.module.scss +++ b/src/components/atoms/layout/copyright.module.scss @@ -2,8 +2,6 @@ @use "../../../styles/abstracts/mixins" as mix; .wrapper { - --icon-size: #{fun.convert-px(70)}; - display: flex; flex-flow: row wrap; align-items: center; diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx index fa79d32..a21fdfb 100644 --- a/src/components/atoms/layout/copyright.stories.tsx +++ b/src/components/atoms/layout/copyright.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { CCBySA } from '../icons'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Icon } from '../images'; import { Copyright as CopyrightComponent } from './copyright'; /** @@ -53,6 +53,6 @@ Copyright.args = { start: '2012', end: '2022', }, - icon: , + icon: , owner: 'Your name', }; diff --git a/src/components/atoms/layout/copyright.test.tsx b/src/components/atoms/layout/copyright.test.tsx index 1e2230c..3aa04d0 100644 --- a/src/components/atoms/layout/copyright.test.tsx +++ b/src/components/atoms/layout/copyright.test.tsx @@ -1,33 +1,34 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { CCBySA } from '../icons'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; +import { Icon } from '../images'; import { Copyright } from './copyright'; const dates = { start: '2012', end: '2022', }; -const icon = ; +const iconHeading = 'CC BY SA'; +const icon = ; const owner = 'Your name'; describe('Copyright', () => { it('renders the copyright owner', () => { render(); - expect(screen.getByText(owner)).toBeInTheDocument(); + expect(rtlScreen.getByText(owner)).toBeInTheDocument(); }); it('renders the copyright start date', () => { render(); - expect(screen.getByText(dates.start)).toBeInTheDocument(); + expect(rtlScreen.getByText(dates.start)).toBeInTheDocument(); }); it('renders the copyright end date', () => { render(); - expect(screen.getByText(dates.end)).toBeInTheDocument(); + expect(rtlScreen.getByText(dates.end)).toBeInTheDocument(); }); it('renders the copyright icon', () => { render(); - expect(screen.getByTitle('CC BY SA')).toBeInTheDocument(); + expect(rtlScreen.getByTitle(iconHeading)).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss index acabcab..e72885a 100644 --- a/src/components/atoms/links/nav-link.module.scss +++ b/src/components/atoms/links/nav-link.module.scss @@ -6,7 +6,6 @@ --draw-border-thickness: #{fun.convert-px(4)}; --draw-border-color1: var(--color-primary-light); --draw-border-color2: var(--color-primary-lighter); - --icon-size: #{fun.convert-px(30)}; display: inline-flex; flex-flow: column nowrap; -- cgit v1.2.3