diff --git a/package-lock.json b/package-lock.json index 93a71997..423d44c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@eleven-labs/design-system", - "version": "0.30.1", + "version": "0.31.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@eleven-labs/design-system", - "version": "0.30.1", + "version": "0.31.0", "license": "MIT", "dependencies": { "autosuggest-highlight": "^3.3.4", diff --git a/package.json b/package.json index cf5070f9..3d852b1c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eleven-labs/design-system", "description": "Design System for Eleven Labs", - "version": "0.31.0", + "version": "0.32.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 8605ce5c..0188ae1b 100644 --- a/src/components/Molecules/Cards/PostCard/PostCard.scss +++ b/src/components/Molecules/Cards/PostCard/PostCard.scss @@ -29,7 +29,7 @@ --background-color-post-card: white; --cover-size-square-mobile-post-card: 74px; - --cover-size-square-desktop-post-card: 185px; + --cover-size-square-desktop-post-card: 200px; --cover-height-horizontal-mobile-post-card: 130px; --cover-height-horizontal-medium-desktop-post-card: 175px; --cover-height-horizontal-large-desktop-post-card: 245px; @@ -57,19 +57,6 @@ @include cover-image-horizontal(var(--cover-height-horizontal-medium-desktop-post-card)); } } - - #{$this}__heading { - -webkit-line-clamp: 3; - } - #{$this}__excerpt { - -webkit-line-clamp: 4; - } - - @include create-media-queries('md') { - #{$this}__heading { - min-height: 6rem; - } - } } &--highlight-dark { @@ -90,11 +77,6 @@ @include cover-image-horizontal(var(--cover-height-horizontal-large-desktop-post-card)); } } - - #{$this}__heading { - -webkit-line-clamp: 3; - min-height: 5.5rem; - } } &--side-image { @@ -102,7 +84,6 @@ @include create-media-queries('md') { flex-direction: row; - max-height: var(--cover-size-square-desktop-post-card); } #{$this}__cover { @include cover-image-square; @@ -112,31 +93,13 @@ } } - #{$this}__heading { - -webkit-line-clamp: 2; - - @include create-media-queries('md') { - width: calc(100% - 55px); + &#{$this}--with-tutorial { + #{$this}__heading { + @include create-media-queries('md') { + width: calc(100% - 55px); + } } } - #{$this}__excerpt { - -webkit-line-clamp: 2; - } - } - - &__heading { - align-items: center; - justify-content: space-between; - gap: #{map-get-strict($token-variables, 'spacing', 'xxs')}; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - } - - &__excerpt { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; } diff --git a/src/components/Molecules/Cards/PostCard/PostCard.tsx b/src/components/Molecules/Cards/PostCard/PostCard.tsx index 4b0fee39..d892df5e 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, Heading, Picture, Skeleton, Text } from '@/components'; +import { Box, Flex, Heading, Picture, Skeleton, Text } from '@/components'; import { PostMetadata } from '@/components'; import type { ComponentPropsWithoutRef } from '@/types'; @@ -27,6 +27,7 @@ export interface PostCardProps extends BoxProps { } export const PostCard: React.FC = ({ + slug, contentType, variant = 'side-image', cover = {}, @@ -40,13 +41,26 @@ export const PostCard: React.FC = ({ tutorialLabel, ...props }) => ( - + - + - + {title} @@ -75,11 +89,11 @@ export const PostCard: React.FC = ({ /> {variant !== 'highlight-dark' && ( - + {excerpt} )} - + ); diff --git a/src/components/Molecules/PostMetadata/PostMetadata.scss b/src/components/Molecules/PostMetadata/PostMetadata.scss index 0f34df9e..c6467bc6 100644 --- a/src/components/Molecules/PostMetadata/PostMetadata.scss +++ b/src/components/Molecules/PostMetadata/PostMetadata.scss @@ -17,11 +17,4 @@ &__date { min-width: max-content; } - - &__authors { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - } } diff --git a/src/components/Molecules/PostMetadata/PostMetadata.stories.ts b/src/components/Molecules/PostMetadata/PostMetadata.stories.ts index e0d52e69..802181a6 100644 --- a/src/components/Molecules/PostMetadata/PostMetadata.stories.ts +++ b/src/components/Molecules/PostMetadata/PostMetadata.stories.ts @@ -26,16 +26,10 @@ 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 a07f126b..7e14bc7e 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, Link, Skeleton, Text } from '@/components'; -import type { ComponentPropsWithoutRef, SpacingSystemProps } from '@/types'; +import { Flex, Icon, Skeleton, Text } from '@/components'; +import type { SpacingSystemProps } from '@/types'; import './PostMetadata.scss'; @@ -16,7 +16,6 @@ export interface PostMetadataProps extends SpacingSystemProps { authors?: { username: string; name: string; - link?: ComponentPropsWithoutRef<'a'>; }[]; isLoading?: boolean; displayedFields?: ('date' | 'readingTime' | 'authors')[]; @@ -74,15 +73,15 @@ export const PostMetadata: React.FC = ({ style={{ minWidth: 50, minHeight: 16 }} > {authors && ( - + <> {variant === 'secondary' && } - {authors.map(({ username, name, link }, authorIndex) => ( + {authors.map(({ username, name }, authorIndex) => ( - {link ? {name} : {name}} + {name} {authorIndex !== authors.length - 1 && {' & '}} ))} - + )} ); @@ -106,7 +105,7 @@ export const PostMetadata: React.FC = ({ {...props} alignItems="center" textSize="s" - flexWrap="no-wrap" + flexWrap="wrap" gap={variant === 'secondary' ? 's' : 'xxs'} className={classNames('post-metadata', { [`post-metadata--${variant}`]: variant })} > diff --git a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss index d395714c..b1fd7918 100644 --- a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss +++ b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.scss @@ -35,10 +35,6 @@ &__link { color: black; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; &::before { content: " "; diff --git a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx index a732fcfe..b7185b01 100644 --- a/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx +++ b/src/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.tsx @@ -67,6 +67,7 @@ export const AutocompleteResult = polyRef<'div', AutocompleteResultProps>( size="s" text={title} textQuery={searchValue} + lineClamp={2} className="autocomplete-result__link" /> diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss index 47df6a5b..80aa6618 100644 --- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss +++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.scss @@ -4,12 +4,20 @@ &__post-list { display: grid; // @todo: add component for grid - @include create-media-queries('md') { + @include create-media-queries('md' ) { grid-template-columns: repeat(2, 1fr); + + .post-card:last-child { + display: none; + } } @include create-media-queries('lg') { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); + + .post-card:last-child { + display: flex; + } } } } diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts index 7405c6af..8135da9e 100644 --- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts +++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.stories.ts @@ -11,7 +11,7 @@ const meta: Meta = { args: { title: 'Nos articles récents autour des dernières tendances technologiques', posts: [ - ...Array.from({ length: 3 }).map((_) => PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]), + ...Array.from({ length: 2 }).map((_) => PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]), { ...(PostCardStories.Overview.args as LastArticlesBlockProps['posts'][0]), title: `Quisque at libero lorem etiam tristique eros magna`, diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx index 3957b7bc..4e8b117c 100644 --- a/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx +++ b/src/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.tsx @@ -18,7 +18,7 @@ export const LastArticlesBlock: React.FC = ({ linkSeeMore: { label: labelLinkSeeMore, ...linkSeeMore }, ...props }) => ( - + {title} diff --git a/src/constants/systemProps/typographySystemProps.ts b/src/constants/systemProps/typographySystemProps.ts index f39e571d..3ef25792 100644 --- a/src/constants/systemProps/typographySystemProps.ts +++ b/src/constants/systemProps/typographySystemProps.ts @@ -7,4 +7,5 @@ export const typographySystemProps: Record({ textAlign, textSize, + lineClamp, ...props }: TProps): string => classNames( @@ -19,5 +20,6 @@ export const typographySystemClassName = ( [`text-underline`]: props.underline, [`text-italic`]: props.italic, [`text-${textSize}`]: textSize, + [`line-clamp-${lineClamp}`]: lineClamp, } ); diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 40931098..8d9cd45c 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -6,7 +6,7 @@ import type { LastTutorialsBlockProps, NewsletterCardProps, } from '@/components'; -import { Box, HomeIntroBlock, LastArticlesBlock, LastTutorialsBlock, NewsletterCard } from '@/components'; +import { HomeIntroBlock, LastArticlesBlock, LastTutorialsBlock, NewsletterCard } from '@/components'; export type HomePageProps = { homeIntroBlock: HomeIntroBlockProps; @@ -25,8 +25,6 @@ export const HomePage: React.FC = ({ {lastTutorialsBlock && } - - - + ); diff --git a/src/styles/utilities/_typography.scss b/src/styles/utilities/_typography.scss index 2b95a1d3..df76a362 100644 --- a/src/styles/utilities/_typography.scss +++ b/src/styles/utilities/_typography.scss @@ -52,6 +52,14 @@ $typography-prop-list-with-breakpoints: ( } } +@mixin line-clamp($number-of-lines) { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $number-of-lines; + text-overflow: ellipsis; +} + /* * Typography System Class Names */ @@ -71,3 +79,9 @@ $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); + } +} diff --git a/src/types/SystemProps/TypographySystemProps.ts b/src/types/SystemProps/TypographySystemProps.ts index 44935cb3..e861d364 100644 --- a/src/types/SystemProps/TypographySystemProps.ts +++ b/src/types/SystemProps/TypographySystemProps.ts @@ -1,4 +1,11 @@ -import type { FontWeightType, TextAlignType, TextSizeType, TextTransformType, TypeWithMediaQueriesType } from '@/types'; +import type { + FontWeightType, + LineClampType, + TextAlignType, + TextSizeType, + TextTransformType, + TypeWithMediaQueriesType, +} from '@/types'; export interface TypographySystemProps { /** @@ -25,4 +32,8 @@ export interface TypographySystemProps { * text-size */ textSize?: TextSizeType; + /** + * clamping text to a specific number of lines + */ + lineClamp?: LineClampType; } diff --git a/src/types/tokenTypes.ts b/src/types/tokenTypes.ts index 0c70febe..f7b3e68f 100644 --- a/src/types/tokenTypes.ts +++ b/src/types/tokenTypes.ts @@ -13,3 +13,4 @@ export type IconNameType = keyof (typeof tokenVariables)['asset']['icon']; export type HeadingSizeType = keyof (typeof tokenVariables)['typography']['heading']; export type TextSizeType = keyof (typeof tokenVariables)['typography']['text']; +export type LineClampType = 1 | 2 | 3 | 4;