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 ------ 61 files changed, 1991 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 (limited to 'src/components/atoms/icons') 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}} - - - ); -}; -- cgit v1.2.3