From ee04742d1f0645908baa30e47845126c28848f50 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 3 May 2022 16:53:55 +0200 Subject: chore: add a CV page --- src/components/atoms/links/link.module.scss | 87 +++++++++++++++++++++- src/components/atoms/links/link.stories.tsx | 20 ++++- src/components/atoms/links/link.tsx | 18 ++++- .../molecules/images/responsive-image.module.scss | 11 +-- .../molecules/images/responsive-image.stories.tsx | 1 + .../molecules/images/responsive-image.tsx | 6 +- .../organisms/widgets/image-widget.module.scss | 13 +++- .../organisms/widgets/image-widget.stories.tsx | 25 +++++-- .../organisms/widgets/image-widget.test.tsx | 11 ++- src/components/organisms/widgets/image-widget.tsx | 18 +++-- 10 files changed, 174 insertions(+), 36 deletions(-) (limited to 'src/components') diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss index d23667a..1b89727 100644 --- a/src/components/atoms/links/link.module.scss +++ b/src/components/atoms/links/link.module.scss @@ -5,23 +5,64 @@ &[hreflang] { &::after { display: inline-block; + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ content: "\0000a0[" attr(hreflang) "]"; font-size: var(--font-size-sm); } } + &--download { + &::after { + display: inline-block; + + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url( +fun.encode-svg( + '' +)); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url( +fun.encode-svg( + '' +)); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url( +fun.encode-svg( + '' +)); + } + } + } + &--external { &::after { display: inline-block; + /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ content: "\0000a0" url(fun.encode-svg('')); } &:focus:not(:active)::after { /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ content: "\0000a0" url(fun.encode-svg('')); } @@ -29,18 +70,56 @@ &[hreflang] { &::after { /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( + content: "\0000a0[" attr(hreflang) "]\0000a0" url( +fun.encode-svg( '' - )); +)); } &:focus:not(:active)::after { /* Prettier is removing spacing between content parts. */ + /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg( + content: "\0000a0[" attr(hreflang) "]\0000a0" url( +fun.encode-svg( '' - )); +)); + } + } + } + + &--external#{&}--download { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0" url( +fun.encode-svg( + '' +)) "\0000a0" url(fun.encode-svg('')); + } + + &[hreflang] { + &::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url( +fun.encode-svg( + '' +)) "\0000a0" url(fun.encode-svg('')); + } + + &:focus:not(:active)::after { + /* Prettier is removing spacing between content parts. */ + + /* prettier-ignore */ + content: "\0000a0[" attr(hreflang) "]\0000a0" url( +fun.encode-svg( + '' +)) "\0000a0" url(fun.encode-svg('')); } } } diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx index c3b3465..420eafe 100644 --- a/src/components/atoms/links/link.stories.tsx +++ b/src/components/atoms/links/link.stories.tsx @@ -31,14 +31,29 @@ export default { required: false, }, }, - external: { + download: { control: { type: 'boolean', }, + description: 'Determine if the link purpose is to download a file.', table: { category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + external: { + control: { + type: 'boolean', }, description: 'Determine if the link is external of the current website.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, type: { name: 'boolean', required: false, @@ -79,6 +94,7 @@ export const Default = Template.bind({}); Default.args = { children: 'A link', href: '#', + download: false, external: false, }; @@ -89,6 +105,7 @@ export const External = Template.bind({}); External.args = { children: 'A link', href: '#', + download: false, external: true, }; @@ -99,6 +116,7 @@ export const ExternalWithLang = Template.bind({}); ExternalWithLang.args = { children: 'A link', href: '#', + download: false, external: true, lang: 'en', }; diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx index 674c07b..c8ba273 100644 --- a/src/components/atoms/links/link.tsx +++ b/src/components/atoms/links/link.tsx @@ -11,6 +11,10 @@ export type LinkProps = { * Set additional classnames to the link. */ className?: string; + /** + * True if it is a download link. Default: false. + */ + download?: boolean; /** * True if it is an external link. Default: false. */ @@ -33,21 +37,29 @@ export type LinkProps = { const Link: FC = ({ children, className = '', + download = false, + external = false, href, lang, - external = false, }) => { + const downloadClass = download ? styles['link--download'] : ''; + return external ? ( {children} ) : ( - {children} + + {children} + ); }; diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 3566421..3a4f283 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -3,8 +3,7 @@ .wrapper { display: flex; flex-flow: column; - width: 100%; - max-width: max-content; + width: fit-content; margin: 0; position: relative; text-align: center; @@ -14,9 +13,7 @@ margin: 0; padding: fun.convert-px(4) var(--spacing-2xs); background: var(--color-bg-secondary); - border: fun.convert-px(1) solid var(--color-border); - box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1) - var(--color-shadow-light); + border: fun.convert-px(1) solid var(--color-border-light); font-weight: 500; } @@ -32,7 +29,7 @@ &:hover, &:focus { - transform: scale(1.1); + transform: scale(var(--scale-up, 1.05)); } &:focus { @@ -43,7 +40,7 @@ } &:active { - transform: scale(0.9); + transform: scale(var(--scale-down, 0.95)); .caption { text-decoration: none; diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index a1f5295..35d9116 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -64,6 +64,7 @@ export default { required: false, }, }, + unoptimized: { table: { disable: true } }, width: { control: { type: 'number', diff --git a/src/components/molecules/images/responsive-image.tsx b/src/components/molecules/images/responsive-image.tsx index 31cbcd1..d07dd6c 100644 --- a/src/components/molecules/images/responsive-image.tsx +++ b/src/components/molecules/images/responsive-image.tsx @@ -1,6 +1,6 @@ import Link, { type LinkProps } from '@components/atoms/links/link'; import Image, { type ImageProps } from 'next/image'; -import { FC } from 'react'; +import { FC, ReactNode } from 'react'; import styles from './responsive-image.module.scss'; export type ResponsiveImageProps = Omit< @@ -14,7 +14,7 @@ export type ResponsiveImageProps = Omit< /** * A figure caption. */ - caption?: string; + caption?: ReactNode; /** * Set additional classnames to the figure wrapper. */ @@ -55,6 +55,7 @@ const ResponsiveImage: FC = ({ alt={alt} layout={layout || 'intrinsic'} objectFit={objectFit || 'contain'} + className={styles.img} {...props} /> {caption && ( @@ -67,6 +68,7 @@ const ResponsiveImage: FC = ({ alt={alt} layout={layout || 'intrinsic'} objectFit={objectFit || 'contain'} + className={styles.img} {...props} /> {caption && ( diff --git a/src/components/organisms/widgets/image-widget.module.scss b/src/components/organisms/widgets/image-widget.module.scss index 8e4d0aa..0d69441 100644 --- a/src/components/organisms/widgets/image-widget.module.scss +++ b/src/components/organisms/widgets/image-widget.module.scss @@ -1,7 +1,12 @@ @use "@styles/abstracts/functions" as fun; -.img { +.figure { + --scale-up: 1.02; + --scale-down: 0.98; + margin: 0; + padding: fun.convert-px(5); + border: fun.convert-px(1) solid var(--color-border); } .txt { @@ -10,7 +15,7 @@ .widget { &--left { - .img { + .figure { margin-right: auto; } @@ -20,7 +25,7 @@ } &--center { - .img { + .figure { margin-left: auto; margin-right: auto; } @@ -31,7 +36,7 @@ } &--right { - .img { + .figure { margin-left: auto; } diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx index 27871ae..3014b36 100644 --- a/src/components/organisms/widgets/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget.stories.tsx @@ -50,7 +50,7 @@ export default { required: true, }, }, - img: { + image: { description: 'An image object.', type: { name: 'object', @@ -58,6 +58,19 @@ export default { value: {}, }, }, + imageClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the image wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, level: { control: { type: 'number', @@ -107,7 +120,7 @@ const Template: ComponentStory = (args) => ( ); -const img = { +const image = { alt: 'Et perferendis quaerat', height: 480, src: 'http://placeimg.com/640/480/nature', @@ -122,7 +135,7 @@ export const AlignLeft = Template.bind({}); AlignLeft.args = { alignment: 'left', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -134,7 +147,7 @@ export const AlignCenter = Template.bind({}); AlignCenter.args = { alignment: 'center', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -146,7 +159,7 @@ export const AlignRight = Template.bind({}); AlignRight.args = { alignment: 'right', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; @@ -158,7 +171,7 @@ export const WithDescription = Template.bind({}); WithDescription.args = { description: 'Sint enim harum', expanded: true, - img, + image, level: 2, title: 'Quo et totam', }; diff --git a/src/components/organisms/widgets/image-widget.test.tsx b/src/components/organisms/widgets/image-widget.test.tsx index 8c24bd9..c6b1a3a 100644 --- a/src/components/organisms/widgets/image-widget.test.tsx +++ b/src/components/organisms/widgets/image-widget.test.tsx @@ -18,7 +18,12 @@ const url = '/another-page'; describe('ImageWidget', () => { it('renders an image', () => { render( - + ); expect(screen.getByRole('img', { name: img.alt })).toBeInTheDocument(); }); @@ -27,7 +32,7 @@ describe('ImageWidget', () => { render( { render( & { /** * The content alignment. @@ -27,7 +27,11 @@ export type ImageWidgetProps = Pick< /** * An object describing the image. */ - img: Image; + image: Image; + /** + * Set additional classnames to the image wrapper. + */ + imageClassName?: string; /** * Add a link to the image. */ @@ -41,20 +45,22 @@ export type ImageWidgetProps = Pick< */ const ImageWidget: FC = ({ alignment = 'left', + className = '', description, - img, + image, + imageClassName = '', url, ...props }) => { const alignmentClass = `widget--${alignment}`; return ( - + ); -- cgit v1.2.3