fix: feedback ui (#70)

eleven-labs · Mar 5, 2024 · 4c85271 · 4c85271
1 parent 9360377
commit 4c85271
Show file tree

Hide file tree

Showing 26 changed files with 110 additions and 70 deletions.
diff --git a/src/components/Atoms/Picture/Picture.tsx b/src/components/Atoms/Picture/Picture.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface PictureProps {
+ img: React.ComponentPropsWithoutRef<'img'>;
+ sources?: React.ComponentPropsWithoutRef<'source'>[];
+}
+
+export const Picture: React.FC<PictureProps> = ({ img, sources }) => (
+ <picture>
+ {sources?.map((source, key) => <source key={key} {...source} />)}
+ <img {...img} alt={img.alt} />
+ </picture>
+);
diff --git a/src/components/Atoms/Picture/index.ts b/src/components/Atoms/Picture/index.ts
@@ -0,0 +1 @@
+export * from './Picture';
diff --git a/src/components/Atoms/index.ts b/src/components/Atoms/index.ts
@@ -10,3 +10,4 @@ export * from './Divider';
 export * from './BurgerButton';
 export * from './CloseButton';
 export * from './Breadcrumb';
+export * from './Picture';
diff --git a/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx b/src/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.tsx
@@ -20,9 +20,9 @@ export const CategoryIntroBlock: React.FC<CategoryIntroBlockProps> = ({ title, d
  px={{ xs: 'l', md: '0' }}
  className="category-intro-block__container"
  >
- <Box width="content-container" pt="m" pb="xxl">
+ <Box pt="m" pb="xxl">
  <Breadcrumb {...breadcrumb} />
- <Heading mt="xl" size="xl">
+ <Heading size="xl" mt="xl">
  {title}
  </Heading>
  <Text mt="l">{description}</Text>

diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.scss
@@ -3,14 +3,23 @@
 .home-intro-block {
  background-color: white;
 
- @include create-media-queries('md') {
- background-image: url('/imgs/home-intro-block.png');
- background-repeat: no-repeat;
- background-position: top right;
- background-size: auto 100%;
+ &__container {
+ @include create-media-queries('md', 'max') {
+ max-width: 90vw;
+ margin: #{map-get-strict($token-variables, 'spacing', 'xl')} auto;
+ }
+
+ @include create-media-queries('md', 'min') {
+ margin-left: 5vw;
+ }
  }
 
- &__container {
- max-width: 724px;
+ &__background {
+ @include create-media-queries('md') {
+ background-image: url('/imgs/home-intro-block.png');
+ background-repeat: no-repeat;
+ background-position: top right;
+ background-size: contain;
+ }
  }
 }
diff --git a/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx b/src/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.tsx
@@ -1,12 +1,13 @@
+import classNames from 'classnames';
 import React from 'react';
 
-import type { BoxProps } from '@/components';
+import type { FlexProps } from '@/components';
 import { Box, Button, Flex, Heading, Text } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
 import './HomeIntroBlock.scss';
 
-export interface HomeIntroBlockProps extends BoxProps {
+export interface HomeIntroBlockProps extends FlexProps {
  intro: React.ReactNode;
  title: React.ReactNode;
  description: React.ReactNode;
@@ -20,25 +21,25 @@ export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
  elevenLabsLink: { label: elevelLabsLinkLabel, ...elevenLabsLink },
  ...props
 }) => (
- <Box className="home-intro-block" {...props}>
+ <Flex {...props} className={classNames('home-intro-block', props.className)}>
  <Flex
  alignItems="baseline"
  flexDirection="column"
- gap="l"
- p="l"
- ml={{ xs: '0', md: 'xxl' }}
  className="home-intro-block__container"
+ flex="1"
+ py={{ xs: '0', md: 'xl' }}
  >
  <Heading size="s" color="info" textTransform="uppercase">
  {intro}
  </Heading>
- <Heading size="xl" color="primary">
+ <Heading size="xl" mt="m" color="primary">
  {title}
  </Heading>
- <Text>{description}</Text>
- <Button as="a" {...elevenLabsLink}>
+ <Text mt="l">{description}</Text>
+ <Button {...elevenLabsLink} as="a" mt="l">
  {elevelLabsLinkLabel}
  </Button>
  </Flex>
- </Box>
+ <Box flex="1" className="home-intro-block__background" hiddenBelow="md" />
+ </Flex>
 );
diff --git a/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx b/src/components/Molecules/Cards/NewsletterCard/NewsletterCard.tsx
@@ -30,7 +30,7 @@ export const NewsletterCard: React.FC<NewsletterCardProps> = ({
  p="l"
  bg="primary"
  color="white"
- className={classNames('newsletter-card', `newsletter-card--${variant}`)}
+ className={classNames('newsletter-card', `newsletter-card--${variant}`, props.className)}
  >
  <Box className="newsletter-card__intro">
  <Heading size="m" color="accent">

diff --git a/src/components/Molecules/Cards/PostCard/PostCard.scss b/src/components/Molecules/Cards/PostCard/PostCard.scss
@@ -41,6 +41,7 @@
  border-radius: #{map-get-strict($token-variables, 'radius', 's')};
 
  #{$this}__cover {
+ width: 100%;
  object-fit: cover;
  }
 

diff --git a/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx b/src/components/Molecules/Cards/PostCard/PostCard.stories.tsx
@@ -20,8 +20,10 @@ Overview.args = {
  contentType: 'article',
  slug: 'slug',
  cover: {
- src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
- alt: 'cover',
+ img: {
+ src: 'https://i.ibb.co/gPtFC17/pexels-matheus-bertelli-1830252.jpg',
+ alt: 'cover',
+ },
  },
  title: `REX Studio : Intégration de composants React avec Varnish ESI dans un site No Code`,
  date: '09 fév. 2021',

diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import type { BoxProps } from '@/components';
-import { Box, Skeleton, Text } from '@/components';
+import type { BoxProps, PictureProps } from '@/components';
+import { Box, Heading, Picture, Skeleton, Text } from '@/components';
 import { PostMetadata } from '@/components';
 import type { ComponentPropsWithoutRef } from '@/types';
 
@@ -14,7 +14,7 @@ export type PostCardVariantType = (typeof postCardVariant)[number];
 export interface PostCardProps extends BoxProps {
  contentType?: 'article' | 'tutorial';
  variant?: PostCardVariantType;
- cover?: ComponentPropsWithoutRef<'img'>;
+ cover?: PictureProps;
  slug?: string;
  title?: string;
  excerpt?: string;
@@ -29,7 +29,7 @@ export interface PostCardProps extends BoxProps {
 export const PostCard: React.FC<PostCardProps> = ({
  contentType,
  variant = 'side-image',
- cover,
+ cover = {},
  title,
  excerpt,
  date,
@@ -42,7 +42,7 @@ export const PostCard: React.FC<PostCardProps> = ({
 }) => (
  <Box as="article" {...props} className={classNames('post-card', `post-card--${variant}`)}>
  <Skeleton isLoading={isLoading}>
- <img className="post-card__cover" {...cover} alt={cover?.alt} />
+ <Picture {...cover} img={{ className: 'post-card__cover', ...cover?.img }} />
  </Skeleton>
  <Box
  my={{ xs: 's', md: 'm' }}
@@ -52,7 +52,7 @@ export const PostCard: React.FC<PostCardProps> = ({
  style={{ display: 'grid' }}
  >
  <Skeleton isLoading={isLoading}>
- <Box as="h2" className="post-card__heading">
+ <Heading as="h2" size="xs" className="post-card__heading">
  <Text as="a" {...link} size="m" data-internal-link="post" className="post-card__link">
  {title}
  </Text>
@@ -69,7 +69,7 @@ export const PostCard: React.FC<PostCardProps> = ({
  {tutorialLabel}
  </Text>
  )}
- </Box>
+ </Heading>
  </Skeleton>
  <PostMetadata
  variant="primary"

diff --git a/src/components/Molecules/SearchField/SearchField.scss b/src/components/Molecules/SearchField/SearchField.scss
@@ -8,7 +8,7 @@
 
  &__input {
  width: 100%;
- padding: #{map-get-strict($token-variables, 'spacing', 'xs')} calc(#{map-get-strict($token-variables, 'spacing', 'xxl')} + #{map-get-strict($token-variables, 'spacing', 'm')}) #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'xs')};
+ padding: #{map-get-strict($token-variables, 'spacing', 'xs')} calc(#{map-get-strict($token-variables, 'spacing', 'xl')} + #{map-get-strict($token-variables, 'spacing', 'm')}) #{map-get-strict($token-variables, 'spacing', 'xs')} #{map-get-strict($token-variables, 'spacing', 'xs')};
  font-family: #{map-get-strict($token-variables, 'font-family', 'base')};
  font-size: var(--font-size-input, #{map-get-strict($token-variables, 'typography', 'text', 'xs', 'font-size')});
  line-height: #{map-get-strict($token-variables, 'line-height', 'large')};

diff --git a/src/components/Molecules/SearchField/SearchField.stories.tsx b/src/components/Molecules/SearchField/SearchField.stories.tsx
@@ -12,7 +12,7 @@ export default {
  },
  args: {
  input: {
- placeholder: 'Rechercher par nom d’article ou d’auteur',
+ placeholder: 'Nom d’article, auteur ...',
  },
  buttonClose: {
  onClick: action('onClose'),

diff --git a/src/components/Molecules/SearchField/SearchField.tsx b/src/components/Molecules/SearchField/SearchField.tsx
@@ -27,7 +27,6 @@ export const SearchField = polyRef<'div', SearchFieldProps>(
  {Boolean(input.value) && (
  <CloseButton {...buttonClose} variant="secondary" className="search-field__button-action" />
  )}
- <Box className="search-field__separator-button" ml="xs" />
  <Box as="button" {...buttonSearch} className="search-field__button-action">
  <Icon name="search" color="primary" size="2.5rem" mx="xs" />
  </Box>

diff --git a/src/components/Organisms/Autocomplete/Autocomplete.stories.ts b/src/components/Organisms/Autocomplete/Autocomplete.stories.ts
@@ -5,7 +5,7 @@ import { Autocomplete } from './Autocomplete';
 const meta: Meta<typeof Autocomplete> = {
  component: Autocomplete,
  args: {
- placeholder: 'Rechercher par nom d’article ou d’auteur',
+ placeholder: 'Nom d’article, auteur ...',
  searchLink: {
  label: 'Voir tous les résultats',
  href: '#',

diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx
@@ -18,13 +18,7 @@ export const LastArticlesBlock: React.FC<LastArticlesBlockProps> = ({
  linkSeeMore: { label: labelLinkSeeMore, ...linkSeeMore },
  ...props
 }) => (
- <Box
- {...props}
- my="xl"
- mx={{ xs: 's', md: 'auto' }}
- width={{ md: 'content-container' }}
- className="last-articles-block"
- >
+ <Box {...props} my="xl" mx={{ xs: 's', md: 'auto' }} className="last-articles-block container-content">
  <Heading size="m" color="primary">
  {title}
  </Heading>

diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx b/src/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.tsx
@@ -33,8 +33,7 @@ export const LastTutorialsBlock: React.FC<LastTutorialsBlockProps> = ({
  py="xl"
  mx={{ xs: 's', md: 'auto' }}
  gap="xl"
- width={{ md: 'content-container' }}
- className="last-tutorials-block"
+ className="last-tutorials-block container-content"
  >
  <Box className="last-tutorials-block__content">
  <Heading size="m">{title}</Heading>

diff --git a/src/components/Organisms/Header/Header.scss b/src/components/Organisms/Header/Header.scss
@@ -29,6 +29,7 @@
  color: #{map-get-strict($token-variables, 'color', 'info')};
  font-weight: #{map-get-strict($token-variables, 'font-weight', 'bold')};
  text-decoration: none;
+ align-self: center;
 
  &:hover {
  color: #{map-get-strict($token-variables, 'color', 'primary')};

diff --git a/src/designTokens/typography/heading.desktop.tokens.json b/src/designTokens/typography/heading.desktop.tokens.json
@@ -6,24 +6,29 @@
  }
  },
  "heading": {
+ "xs": {
+ "font-size": {
+ "value": "20px"
+ }
+ },
  "s": {
  "font-size": {
- "value": "24px"
+ "value": "{typography.heading.xs.font-size} + 4"
  }
  },
  "m": {
  "font-size": {
- "value": "{typography.heading.s.font-size.value} + 8"
+ "value": "{typography.heading.s.font-size} + 8"
  }
  },
  "l": {
  "font-size": {
- "value": "{typography.heading.m.font-size.value} + 8"
+ "value": "{typography.heading.m.font-size} + 8"
  }
  },
  "xl": {
  "font-size": {
- "value": "{typography.heading.m.font-size.value} * 2"
+ "value": "{typography.heading.m.font-size} * 2"
  },
  "letter-spacing": {
  "value": "3px"

diff --git a/src/designTokens/typography/heading.tokens.json b/src/designTokens/typography/heading.tokens.json
@@ -3,42 +3,53 @@
  "heading": {
  "base": {
  "font-family": {
- "value": "{font-family.heading.value}"
+ "value": "{font-family.heading}"
  },
  "line-height": {
- "value": "{line-height.base.value}"
+ "value": "{line-height.base}"
  },
  "letter-spacing": {
- "value": "1px"
+ "value": "0px"
+ }
+ },
+ "xs": {
+ "font-family": {
+ "value": "{font-family.base}"
+ },
+ "font-size": {
+ "value": "16px"
+ },
+ "font-weight": {
+ "value": "{font-weight.semi-bold}"
  }
  },
  "s": {
  "font-size": {
  "value": "16px"
  },
  "font-weight": {
- "value": "{font-weight.bold.value}"
+ "value": "{font-weight.bold}"
  }
  },
  "m": {
  "font-size": {
- "value": "{typography.heading.s.font-size.value} + 8"
+ "value": "{typography.heading.s.font-size} + 8"
  },
  "font-weight": {
- "value": "{font-weight.bold.value}"
+ "value": "{font-weight.bold}"
  }
  },
  "l": {
  "font-size": {
- "value": "{typography.heading.m.font-size.value} + 8"
+ "value": "{typography.heading.m.font-size} + 8"
  }
  },
  "xl": {
  "font-size": {
- "value": "{typography.heading.l.font-size.value} + 8"
+ "value": "{typography.heading.l.font-size} + 8"
  },
  "font-weight": {
- "value": "{font-weight.regular.value}"
+ "value": "{font-weight.regular}"
  },
  "text-transform": {
  "value": "uppercase"

diff --git a/src/designTokens/typography/text.tokens.json b/src/designTokens/typography/text.tokens.json
@@ -3,7 +3,7 @@
  "text": {
  "base": {
  "line-height": {
- "value": "{line-height.base.value}"
+ "value": "{line-height.large}"
  }
  },
  "xs": {

diff --git a/src/designTokens/width.tokens.json b/src/designTokens/width.tokens.json
@@ -5,9 +5,6 @@
  },
  "screen": {
  "value": "100vw"
- },
- "content-container": {
- "value": "90rem"
  }
  }
 }
diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
@@ -22,11 +22,11 @@ export const HomePage: React.FC<HomePageProps> = ({
  newsletterCard,
 }) => (
  <>
- <HomeIntroBlock py={{ xs: '0', md: 'xl' }} {...homeIntroBlock} />
+ <HomeIntroBlock {...homeIntroBlock} />
  <LastArticlesBlock {...lastArticlesBlock} />
  {lastTutorialsBlock && <LastTutorialsBlock {...lastTutorialsBlock} />}
- <Box my="xl" mx={{ xs: 's', md: 'auto' }} width={{ md: 'content-container' }}>
- <NewsletterCard variant="horizontal" {...newsletterCard} />
+ <Box my="xl" mx={{ xs: 's', md: 'auto' }}>
+ <NewsletterCard variant="horizontal" className="container-content" {...newsletterCard} />
  </Box>
  </>
 );