From fe1b5b20c4687aede72f42767031041aaba3eb39 Mon Sep 17 00:00:00 2001 From: fpasquet Date: Tue, 26 Mar 2024 08:54:58 +0100 Subject: [PATCH] fix: feedback ui heading post card (#77) --- package-lock.json | 4 ++-- package.json | 2 +- .../Molecules/Cards/PostCard/PostCard.scss | 10 ++++++-- .../Molecules/Cards/PostCard/PostCard.tsx | 24 +++++++++---------- .../PostMetadata/PostMetadata.stories.ts | 6 +++++ .../Molecules/PostMetadata/PostMetadata.tsx | 13 +++++----- .../AutocompleteResult/AutocompleteResult.tsx | 2 +- .../typographySystemClassName.ts | 9 ++++--- src/pages/PostPage/PostPage.scss | 2 +- src/styles/utilities/_typography.scss | 10 +++++--- .../SystemProps/TypographySystemProps.ts | 2 +- 11 files changed, 51 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 423d44c1..d371e8de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@eleven-labs/design-system", - "version": "0.31.0", + "version": "0.33.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@eleven-labs/design-system", - "version": "0.31.0", + "version": "0.33.0", "license": "MIT", "dependencies": { "autosuggest-highlight": "^3.3.4", diff --git a/package.json b/package.json index 3d852b1c..5dbe22e0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eleven-labs/design-system", "description": "Design System for Eleven Labs", - "version": "0.32.0", + "version": "0.33.0", "repository": { "type": "git", "url": "https://github.com/eleven-labs/design-system.git" diff --git a/src/components/Molecules/Cards/PostCard/PostCard.scss b/src/components/Molecules/Cards/PostCard/PostCard.scss index 0188ae1b..ea0a5451 100644 --- a/src/components/Molecules/Cards/PostCard/PostCard.scss +++ b/src/components/Molecules/Cards/PostCard/PostCard.scss @@ -28,17 +28,19 @@ $this: &; --background-color-post-card: white; - --cover-size-square-mobile-post-card: 74px; - --cover-size-square-desktop-post-card: 200px; + --cover-size-square-mobile-post-card: 67px; + --cover-size-square-desktop-post-card: 190px; --cover-height-horizontal-mobile-post-card: 130px; --cover-height-horizontal-medium-desktop-post-card: 175px; --cover-height-horizontal-large-desktop-post-card: 245px; + --max-height-post-card: auto; position: relative; display: flex; background-color: var(--background-color-post-card); border-radius: #{map-get-strict($token-variables, 'radius', 's')}; + max-height: var(--max-height-post-card); #{$this}__cover { width: 100%; @@ -80,9 +82,13 @@ } &--side-image { + --max-height-post-card: var(--cover-size-square-mobile-post-card); + flex-direction: row-reverse; @include create-media-queries('md') { + --max-height-post-card: var(--cover-size-square-desktop-post-card); + flex-direction: row; } #{$this}__cover { diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx index d892df5e..93d09977 100644 --- a/src/components/Molecules/Cards/PostCard/PostCard.tsx +++ b/src/components/Molecules/Cards/PostCard/PostCard.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React from 'react'; import type { BoxProps, PictureProps } from '@/components'; -import { Box, Flex, Heading, Picture, Skeleton, Text } from '@/components'; +import { Box, Heading, Picture, Skeleton, Text } from '@/components'; import { PostMetadata } from '@/components'; import type { ComponentPropsWithoutRef } from '@/types'; @@ -49,18 +49,16 @@ export const PostCard: React.FC = ({ })} > - + - + - + {title} @@ -89,11 +87,11 @@ export const PostCard: React.FC = ({ /> {variant !== 'highlight-dark' && ( - + {excerpt} )} - + ); diff --git a/src/components/Molecules/PostMetadata/PostMetadata.stories.ts b/src/components/Molecules/PostMetadata/PostMetadata.stories.ts index 802181a6..e0d52e69 100644 --- a/src/components/Molecules/PostMetadata/PostMetadata.stories.ts +++ b/src/components/Molecules/PostMetadata/PostMetadata.stories.ts @@ -26,10 +26,16 @@ WithVariantSecondary.args = { { username: 'jdoe', name: 'J. Doe', + link: { + href: '/fr/authors/jdoe', + }, }, { username: 'jdupont', name: 'J. Dupont', + link: { + href: '/fr/authors/jdupont', + }, }, ], variant: 'secondary', diff --git a/src/components/Molecules/PostMetadata/PostMetadata.tsx b/src/components/Molecules/PostMetadata/PostMetadata.tsx index 7e14bc7e..de35ad94 100644 --- a/src/components/Molecules/PostMetadata/PostMetadata.tsx +++ b/src/components/Molecules/PostMetadata/PostMetadata.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; import React, { Fragment } from 'react'; -import { Flex, Icon, Skeleton, Text } from '@/components'; -import type { SpacingSystemProps } from '@/types'; +import { Flex, Icon, Link, Skeleton, Text } from '@/components'; +import type { ComponentPropsWithoutRef, SpacingSystemProps } from '@/types'; import './PostMetadata.scss'; @@ -16,6 +16,7 @@ export interface PostMetadataProps extends SpacingSystemProps { authors?: { username: string; name: string; + link?: ComponentPropsWithoutRef<'a'>; }[]; isLoading?: boolean; displayedFields?: ('date' | 'readingTime' | 'authors')[]; @@ -73,15 +74,15 @@ export const PostMetadata: React.FC = ({ style={{ minWidth: 50, minHeight: 16 }} > {authors && ( - <> + {variant === 'secondary' && } - {authors.map(({ username, name }, authorIndex) => ( + {authors.map(({ username, name, link }, authorIndex) => ( - {name} + {link ? {name} : {name}} {authorIndex !== authors.length - 1 && {' & '}} ))} - + )} ); diff --git a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx index b7185b01..fe2138e5 100644 --- a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx +++ b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx @@ -67,7 +67,7 @@ export const AutocompleteResult = polyRef<'div', AutocompleteResultProps>( size="s" text={title} textQuery={searchValue} - lineClamp={2} + lineClamp={{ xs: 4, md: 2 }} className="autocomplete-result__link" /> diff --git a/src/helpers/systemPropsHelper/typographySystemClassName.ts b/src/helpers/systemPropsHelper/typographySystemClassName.ts index 53058dc5..7e7366d5 100644 --- a/src/helpers/systemPropsHelper/typographySystemClassName.ts +++ b/src/helpers/systemPropsHelper/typographySystemClassName.ts @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { classNamesWithModifiers } from '@/helpers/systemPropsHelper/classNamesWithModifiers'; -import type { MediaQueryType, TextAlignType, TypographySystemProps } from '@/types'; +import type { LineClampType, MediaQueryType, TextAlignType, TypographySystemProps } from '@/types'; export const typographySystemClassName = ({ textAlign, @@ -20,6 +20,9 @@ export const typographySystemClassName = ( [`text-underline`]: props.underline, [`text-italic`]: props.italic, [`text-${textSize}`]: textSize, - [`line-clamp-${lineClamp}`]: lineClamp, - } + }, + ...classNamesWithModifiers({ + propValue: lineClamp, + className: 'line-clamp', + }) ); diff --git a/src/pages/PostPage/PostPage.scss b/src/pages/PostPage/PostPage.scss index 91fb24db..90e0d49e 100644 --- a/src/pages/PostPage/PostPage.scss +++ b/src/pages/PostPage/PostPage.scss @@ -37,7 +37,7 @@ $headings-by-compoent-variant-name: ( border-radius: #{map-get-strict($token-variables, 'radius', 'xs')}; @include create-media-queries('md') { - --height-cover-post-page: 335px; + --height-cover-post-page: 330px; } } diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss index df76a362..fdeee083 100644 --- a/src/styles/utilities/_typography.scss +++ b/src/styles/utilities/_typography.scss @@ -80,8 +80,12 @@ $text-config: map.get($token-variables, 'typography', 'text'); @include component('heading', $heading-config); @include text-component($text-config); -@for $number-of-lines from 1 to 4 { - .line-clamp-#{$number-of-lines} { - @include line-clamp($number-of-lines); +@each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') { + @include create-media-queries($breakpoint-name) { + @for $number-of-lines from 1 to 4 { + .line-clamp-#{$number-of-lines}\@#{$breakpoint-name} { + @include line-clamp($number-of-lines); + } + } } } diff --git a/src/types/SystemProps/TypographySystemProps.ts b/src/types/SystemProps/TypographySystemProps.ts index e861d364..21ce687c 100644 --- a/src/types/SystemProps/TypographySystemProps.ts +++ b/src/types/SystemProps/TypographySystemProps.ts @@ -35,5 +35,5 @@ export interface TypographySystemProps { /** * clamping text to a specific number of lines */ - lineClamp?: LineClampType; + lineClamp?: TypeWithMediaQueriesType; }