diff options
31 files changed, 363 insertions, 112 deletions
diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx index 52b5126..96ce1d8 100644 --- a/src/components/atoms/icons/arrow.stories.tsx +++ b/src/components/atoms/icons/arrow.stories.tsx @@ -5,15 +5,25 @@ export default { title: 'Atoms/Icons', component: ArrowIcon, argTypes: { + 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'], - table: { - defaultValue: { summary: 'right' }, - }, type: { name: 'string', required: false, @@ -27,3 +37,6 @@ const Template: ComponentStory<typeof ArrowIcon> = (args) => ( ); 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 index 01813ce..502dcc1 100644 --- a/src/components/atoms/icons/arrow.test.tsx +++ b/src/components/atoms/icons/arrow.test.tsx @@ -2,8 +2,8 @@ import { render } from '@test-utils'; import Arrow from './arrow'; describe('Arrow', () => { - it('renders an arrow icon', () => { - const { container } = render(<Arrow />); + it('renders an arrow icon oriented to the right', () => { + const { container } = render(<Arrow direction="right" />); expect(container).toBeDefined(); }); }); diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx index f50d117..5f3c460 100644 --- a/src/components/atoms/icons/arrow.tsx +++ b/src/components/atoms/icons/arrow.tsx @@ -1,13 +1,17 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './arrow.module.scss'; -type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; +export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; -type ArrowProps = { +export type ArrowProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; /** * The arrow direction. Default: right. */ - direction?: ArrowDirection; + direction: ArrowDirection; }; /** @@ -15,9 +19,9 @@ type ArrowProps = { * * Render a svg arrow icon. */ -const Arrow: FC<ArrowProps> = ({ direction = 'right' }) => { +const Arrow: VFC<ArrowProps> = ({ className = '', direction }) => { const directionClass = styles[`icon--${direction}`]; - const classes = `${styles.icon} ${directionClass}`; + const classes = `${styles.icon} ${directionClass} ${className}`; if (direction === 'top') { return ( diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx index 2c1d93a..8575cb9 100644 --- a/src/components/atoms/icons/career.stories.tsx +++ b/src/components/atoms/icons/career.stories.tsx @@ -4,6 +4,21 @@ import CareerIcon from './career'; export default { title: 'Atoms/Icons', component: CareerIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof CareerIcon>; const Template: ComponentStory<typeof CareerIcon> = (args) => ( diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx index aecab1e..28edcc7 100644 --- a/src/components/atoms/icons/career.tsx +++ b/src/components/atoms/icons/career.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './career.module.scss'; +export type CareerProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Career Component * * Render a career svg icon. */ -const Career: FC = () => { +const Career: VFC<CareerProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles.bottom} diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx index 42a93c9..21d6cd5 100644 --- a/src/components/atoms/icons/cc-by-sa.stories.tsx +++ b/src/components/atoms/icons/cc-by-sa.stories.tsx @@ -5,6 +5,21 @@ import CCBySAIcon from './cc-by-sa'; export default { title: 'Atoms/Icons', component: CCBySAIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof CCBySAIcon>; const Template: ComponentStory<typeof CCBySAIcon> = (args) => ( diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx index 03d54f7..adb03e4 100644 --- a/src/components/atoms/icons/cc-by-sa.test.tsx +++ b/src/components/atoms/icons/cc-by-sa.test.tsx @@ -1,9 +1,9 @@ -import { render } from '@test-utils'; +import { render, screen } from '@test-utils'; import CCBySA from './cc-by-sa'; describe('CCBySA', () => { it('renders a CC BY SA icon', () => { - const { container } = render(<CCBySA />); - expect(container).toBeDefined(); + render(<CCBySA />); + 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 index adc8b79..552504e 100644 --- a/src/components/atoms/icons/cc-by-sa.tsx +++ b/src/components/atoms/icons/cc-by-sa.tsx @@ -1,18 +1,25 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './cc-by-sa.module.scss'; +export type CCBySAProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * CCBySA component * * Render a CC BY SA svg icon. */ -const CCBySA: FC = () => { +const CCBySA: VFC<CCBySAProps> = ({ className = '' }) => { const intl = useIntl(); return ( <svg - className={styles.icon} + className={`${styles.icon} ${className}`} viewBox="0 0 211.99811 63.999996" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx index 265df7a..b1d88cd 100644 --- a/src/components/atoms/icons/close.stories.tsx +++ b/src/components/atoms/icons/close.stories.tsx @@ -4,6 +4,21 @@ import CloseIcon from './close'; export default { title: 'Atoms/Icons', component: CloseIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof CloseIcon>; const Template: ComponentStory<typeof CloseIcon> = (args) => ( diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx index 80d904e..eb9ce7c 100644 --- a/src/components/atoms/icons/close.tsx +++ b/src/components/atoms/icons/close.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './close.module.scss'; +export type CloseProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Close component * * Render a close svg icon. */ -const Close: FC = () => { +const Close: VFC<CloseProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles.line} diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx index 3b16ffc..ee883d8 100644 --- a/src/components/atoms/icons/cog.stories.tsx +++ b/src/components/atoms/icons/cog.stories.tsx @@ -4,6 +4,21 @@ import CogIcon from './cog'; export default { title: 'Atoms/Icons', component: CogIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof CogIcon>; const Template: ComponentStory<typeof CogIcon> = (args) => ( diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx index bed19ce..df6d54d 100644 --- a/src/components/atoms/icons/cog.tsx +++ b/src/components/atoms/icons/cog.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './cog.module.scss'; +export type CogProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Cog component * * Render a cog svg icon. */ -const Cog: FC = () => { +const Cog: VFC<CogProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" /> <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" /> diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx index 317b4b6..46e3ad4 100644 --- a/src/components/atoms/icons/computer-screen.stories.tsx +++ b/src/components/atoms/icons/computer-screen.stories.tsx @@ -4,6 +4,21 @@ import ComputerScreenIcon from './computer-screen'; export default { title: 'Atoms/Icons', component: ComputerScreenIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof ComputerScreenIcon>; const Template: ComponentStory<typeof ComputerScreenIcon> = (args) => ( diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx index c9c869d..310836f 100644 --- a/src/components/atoms/icons/computer-screen.tsx +++ b/src/components/atoms/icons/computer-screen.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './computer-screen.module.scss'; +export type ComputerScreenProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * ComputerScreen component * * Render a computer screen svg icon. */ -const ComputerScreen: FC = () => { +const ComputerScreen: VFC<ComputerScreenProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z" diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx index 9577431..9139b44 100644 --- a/src/components/atoms/icons/envelop.stories.tsx +++ b/src/components/atoms/icons/envelop.stories.tsx @@ -4,6 +4,21 @@ import EnvelopIcon from './envelop'; export default { title: 'Atoms/Icons', component: EnvelopIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof EnvelopIcon>; const Template: ComponentStory<typeof EnvelopIcon> = (args) => ( diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx index a846a45..7b50d1d 100644 --- a/src/components/atoms/icons/envelop.tsx +++ b/src/components/atoms/icons/envelop.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './envelop.module.scss'; +export type EnvelopProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Envelop Component * * Render an envelop svg icon. */ -const Envelop: FC = () => { +const Envelop: VFC<EnvelopProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles.background} diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx index c145daf..062d3ee 100644 --- a/src/components/atoms/icons/hamburger.stories.tsx +++ b/src/components/atoms/icons/hamburger.stories.tsx @@ -5,6 +5,19 @@ export default { title: 'Atoms/Icons', component: HamburgerIcon, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, isActive: { control: { type: 'boolean', diff --git a/src/components/atoms/icons/hamburger.tsx b/src/components/atoms/icons/hamburger.tsx index f081bf7..6716b26 100644 --- a/src/components/atoms/icons/hamburger.tsx +++ b/src/components/atoms/icons/hamburger.tsx @@ -2,6 +2,13 @@ import { FC } from 'react'; import styles from './hamburger.module.scss'; type HamburgerProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; + /** + * Transform hamburger to a close icon when active. + */ isActive: boolean; }; @@ -10,9 +17,9 @@ type HamburgerProps = { * * Render a Hamburger icon. */ -const Hamburger: FC<HamburgerProps> = ({ isActive }) => { +const Hamburger: FC<HamburgerProps> = ({ className = '', isActive }) => { const stateClass = isActive ? `${styles['icon--active']}` : ''; - const iconClasses = `${styles.icon} ${stateClass}`; + const iconClasses = `${styles.icon} ${stateClass} ${className}`; return <span className={iconClasses}></span>; }; diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx index 59eb477..b1c995c 100644 --- a/src/components/atoms/icons/home.stories.tsx +++ b/src/components/atoms/icons/home.stories.tsx @@ -4,6 +4,21 @@ import HomeIcon from './home'; export default { title: 'Atoms/Icons', component: HomeIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof HomeIcon>; const Template: ComponentStory<typeof HomeIcon> = (args) => ( diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx index 90d3a14..71bbc4a 100644 --- a/src/components/atoms/icons/home.tsx +++ b/src/components/atoms/icons/home.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './home.module.scss'; +export type HomeProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Home component. * * Render a home svg icon. */ -const Home: FC = () => { +const Home: VFC<HomeProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles.wall} diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx index 69c5b50..80e183e 100644 --- a/src/components/atoms/icons/magnifying-glass.stories.tsx +++ b/src/components/atoms/icons/magnifying-glass.stories.tsx @@ -4,6 +4,21 @@ import MagnifyingGlassIcon from './magnifying-glass'; export default { title: 'Atoms/Icons', component: MagnifyingGlassIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof MagnifyingGlassIcon>; const Template: ComponentStory<typeof MagnifyingGlassIcon> = (args) => ( diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx index 547dd00..445ef10 100644 --- a/src/components/atoms/icons/magnifying-glass.tsx +++ b/src/components/atoms/icons/magnifying-glass.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './magnifying-glass.module.scss'; +export type MagnifyingGlassProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * MagnifyingGlass component * * Render a magnifying glass svg icon. */ -const MagnifyingGlass: FC = () => { +const MagnifyingGlass: VFC<MagnifyingGlassProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles['small-handle']} diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx index 393744b..4d2fb9a 100644 --- a/src/components/atoms/icons/moon.stories.tsx +++ b/src/components/atoms/icons/moon.stories.tsx @@ -4,6 +4,34 @@ import MoonIcon from './moon'; export default { title: 'Atoms/Icons', component: MoonIcon, + argTypes: { + 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<typeof MoonIcon>; const Template: ComponentStory<typeof MoonIcon> = (args) => ( diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx index 82b0ef6..4f52319 100644 --- a/src/components/atoms/icons/moon.tsx +++ b/src/components/atoms/icons/moon.tsx @@ -1,14 +1,21 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './moon.module.scss'; type MoonProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; + /** + * The SVG title. + */ title?: string; }; -const Moon: FC<MoonProps> = ({ title }) => { +const Moon: VFC<MoonProps> = ({ className = '', title }) => { return ( <svg - className={styles.icon} + className={`${styles.icon} ${className}`} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx index 1b5086a..ffa28f2 100644 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ b/src/components/atoms/icons/plus-minus.stories.tsx @@ -4,44 +4,14 @@ import PlusMinusIcon from './plus-minus'; export default { title: 'Atoms/Icons', component: PlusMinusIcon, - args: { - ariaHidden: true, - }, argTypes: { - additionalClasses: { - control: { - type: 'text', - }, - description: 'Set additional classes.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - ariaHidden: { - control: { - type: 'boolean', - }, - description: 'Should be hidden for accessibility.', - table: { - category: 'Options', - defaultValue: { summary: true }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - ariaLabel: { + className: { control: { type: 'text', }, - description: 'An accessible name.', + description: 'Set additional classnames.', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx index 96c2ad0..6903c7a 100644 --- a/src/components/atoms/icons/plus-minus.test.tsx +++ b/src/components/atoms/icons/plus-minus.test.tsx @@ -1,16 +1,9 @@ -import { render, screen } from '@test-utils'; +import { render } from '@test-utils'; import PlusMinus from './plus-minus'; describe('PlusMinus', () => { - it('renders a plus icon', () => { - render(<PlusMinus state="plus" ariaHidden={false} ariaLabel="Plus icon" />); - expect(screen.getByLabelText('Plus icon')).toHaveClass('icon--plus'); - }); - - it('renders a minus icon', () => { - render( - <PlusMinus state="minus" ariaHidden={false} ariaLabel="Minus icon" /> - ); - expect(screen.getByLabelText('Minus icon')).toHaveClass('icon--minus'); + it('renders a plus/minus icon', () => { + const { container } = render(<PlusMinus state="plus" />); + expect(container).toBeDefined(); }); }); diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx index 1a6f7b0..78aa14a 100644 --- a/src/components/atoms/icons/plus-minus.tsx +++ b/src/components/atoms/icons/plus-minus.tsx @@ -3,17 +3,9 @@ import styles from './plus-minus.module.scss'; type PlusMinusProps = { /** - * Adds additional classes. + * Set additional classnames to the icon. */ - additionalClasses?: string; - /** - * An accessible name. - */ - ariaLabel?: string; - /** - * Should be hidden for accessibility. Default: true. - */ - ariaHidden?: boolean; + className?: string; /** * Which state should be displayed. */ @@ -25,19 +17,13 @@ type PlusMinusProps = { * * Render a plus or a minus icon. */ -const PlusMinus: FC<PlusMinusProps> = ({ - additionalClasses, - ariaHidden = true, - ariaLabel, - state, -}) => { +const PlusMinus: FC<PlusMinusProps> = ({ className, state }) => { const stateClass = `icon--${state}`; return ( <div - className={`${styles.icon} ${styles[stateClass]} ${additionalClasses}`} - aria-label={ariaLabel} - aria-hidden={ariaHidden} + className={`${styles.icon} ${styles[stateClass]} ${className}`} + aria-hidden={true} ></div> ); }; diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx index e2206c2..46bb39f 100644 --- a/src/components/atoms/icons/posts-stack.stories.tsx +++ b/src/components/atoms/icons/posts-stack.stories.tsx @@ -4,6 +4,21 @@ import PostsStackIcon from './posts-stack'; export default { title: 'Atoms/Icons', component: PostsStackIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta<typeof PostsStackIcon>; const Template: ComponentStory<typeof PostsStackIcon> = (args) => ( diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx index 22069ac..1998d25 100644 --- a/src/components/atoms/icons/posts-stack.tsx +++ b/src/components/atoms/icons/posts-stack.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './posts-stack.module.scss'; +export type PostsStackProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Posts stack component. * * Render a posts stack svg icon. */ -const PostsStack: FC = () => { +const PostsStack: VFC<PostsStackProps> = ({ className = '' }) => { return ( <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" - className={styles.icon} + className={`${styles.icon} ${className}`} > <path className={styles.background} diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx index 613b59e..23c5b27 100644 --- a/src/components/atoms/icons/sun.stories.tsx +++ b/src/components/atoms/icons/sun.stories.tsx @@ -4,6 +4,34 @@ import SunIcon from './sun'; export default { title: 'Atoms/Icons', component: SunIcon, + argTypes: { + 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<typeof SunIcon>; const Template: ComponentStory<typeof SunIcon> = (args) => ( diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx index 6caad9c..fa9d922 100644 --- a/src/components/atoms/icons/sun.tsx +++ b/src/components/atoms/icons/sun.tsx @@ -1,8 +1,12 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './sun.module.scss'; type SunProps = { /** + * Set additional classnames to the icon. + */ + className?: string; + /** * The SVG title. */ title?: string; @@ -13,10 +17,10 @@ type SunProps = { * * Render a svg sun icon. */ -const Sun: FC<SunProps> = ({ title }) => { +const Sun: VFC<SunProps> = ({ className = '', title }) => { return ( <svg - className={styles.sun} + className={`${styles.sun} ${className}`} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" > |