From dc8da68e57d78c376a18f810e90261ccfd74f3ba Mon Sep 17 00:00:00 2001 From: fpasquet Date: Wed, 31 Jan 2024 09:32:40 +0100 Subject: [PATCH] fix: post cover --- .stylelintrc.json | 1 + bin/build-design-tokens/index.ts | 14 +-- package-lock.json | 4 +- package.json | 2 +- .../Atoms/Breadcrumb/Breadcrumb.tsx | 4 +- .../Blocks/LastArticlesBlock/index.ts | 1 + .../Blocks/LastTutorialsBlock/index.ts | 1 + src/components/Organisms/Blocks/index.ts | 2 + src/components/Organisms/index.ts | 1 + src/pages/HomePage/HomePage.tsx | 15 ++-- src/pages/PostPage/PostPage.scss | 87 +++++++++++++++++++ src/pages/PostPage/PostPage.tsx | 38 +++++--- src/pages/PostPage/PostPageContent.scss | 81 ----------------- src/pages/PostPage/PostPageContent.tsx | 20 ++--- 14 files changed, 150 insertions(+), 121 deletions(-) create mode 100644 src/components/Organisms/Blocks/LastArticlesBlock/index.ts create mode 100644 src/components/Organisms/Blocks/LastTutorialsBlock/index.ts create mode 100644 src/components/Organisms/Blocks/index.ts create mode 100644 src/pages/PostPage/PostPage.scss delete mode 100644 src/pages/PostPage/PostPageContent.scss diff --git a/.stylelintrc.json b/.stylelintrc.json index b7d1ef8a..a924792a 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -3,6 +3,7 @@ "ignoreFiles": [ "src/styles/_fonts.scss", "src/styles/_token-custom-properties.scss", + "src/styles/_token-custom-properties-desktop.scss", "src/styles/abstracts/variables/_token-variables.scss", "src/styles/abstracts/variables/_variables.scss" ] diff --git a/bin/build-design-tokens/index.ts b/bin/build-design-tokens/index.ts index 01912d64..44fe79c9 100644 --- a/bin/build-design-tokens/index.ts +++ b/bin/build-design-tokens/index.ts @@ -6,6 +6,9 @@ import StyleDictionary from 'style-dictionary'; import './formats/register'; import './transforms/register'; + +const defaultFilter = (token: TransformedToken) => token.type !== 'scale'; + const filterExcludesCategories = (token: TransformedToken, categories: string[]): boolean => token?.attributes?.category ? !categories.includes(token.attributes.category) : false; @@ -19,7 +22,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'css/variables', - filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']), + filter: (token): boolean => defaultFilter(token) && filterExcludesCategories(token, ['asset', 'breakpoint']), destination: '_token-custom-properties.scss', }, ], @@ -30,7 +33,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'scss/map-deep', - filter: (token): boolean => token?.attributes?.category === 'color', + filter: (token): boolean => defaultFilter(token) && token?.attributes?.category === 'color', destination: 'abstracts/variables/_variables.scss', mapName: 'variables', } as File, @@ -42,7 +45,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'scss/map-deep-with-css-variables', - filter: (token): boolean => filterExcludesCategories(token, ['asset']), + filter: (token): boolean => defaultFilter(token) && filterExcludesCategories(token, ['asset']), destination: 'abstracts/variables/_token-variables.scss', }, ], @@ -56,6 +59,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'typescript/object', + filter: defaultFilter, destination: 'constants/tokenVariables.ts', }, ], @@ -72,7 +76,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'css/variables', - filter: (token): boolean => filterExcludesCategories(token, ['asset', 'breakpoint']) && token.filePath.indexOf(`.desktop`) > -1, + filter: (token): boolean => defaultFilter(token) && filterExcludesCategories(token, ['asset', 'breakpoint']), destination: '_token-custom-properties-desktop.scss', options: { mediaQuery: 'md', @@ -86,7 +90,7 @@ const sdConfigs: Config[] = [ files: [ { format: 'typescript/object', - filter: (token): boolean => token.filePath.indexOf(`.desktop`) > -1, + filter: defaultFilter, destination: 'constants/tokenVariablesDesktop.ts', }, ], diff --git a/package-lock.json b/package-lock.json index 405d735d..e6ee950d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@eleven-labs/design-system", - "version": "0.29.0", + "version": "0.30.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@eleven-labs/design-system", - "version": "0.29.0", + "version": "0.30.0", "license": "MIT", "dependencies": { "autosuggest-highlight": "^3.3.4", diff --git a/package.json b/package.json index 19e4739e..720046b4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@eleven-labs/design-system", "description": "Design System for Eleven Labs", - "version": "0.29.0", + "version": "0.30.0", "repository": { "type": "git", "url": "https://github.com/eleven-labs/design-system.git" diff --git a/src/components/Atoms/Breadcrumb/Breadcrumb.tsx b/src/components/Atoms/Breadcrumb/Breadcrumb.tsx index 60574c75..94c74807 100644 --- a/src/components/Atoms/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Atoms/Breadcrumb/Breadcrumb.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import React, { Fragment } from 'react'; import { Flex, Link, Text } from '@/components'; @@ -7,6 +8,7 @@ import './Breadcrumb.scss'; export interface BreadcrumbProps extends MarginSystemProps { items: ({ label: string } & ComponentPropsWithoutRef<'a'>)[]; + className?: string; } export const Breadcrumb: React.FC = ({ items, ...props }) => ( @@ -17,7 +19,7 @@ export const Breadcrumb: React.FC = ({ items, ...props }) => ( itemType="https://schema.org/BreadcrumbList" gap="xxs-3" fontWeight="semi-bold" - className="breadcrumb" + className={classNames('breadcrumb', props.className)} > {items.map(({ label, ...itemLink }, index) => ( diff --git a/src/components/Organisms/Blocks/LastArticlesBlock/index.ts b/src/components/Organisms/Blocks/LastArticlesBlock/index.ts new file mode 100644 index 00000000..fb31b754 --- /dev/null +++ b/src/components/Organisms/Blocks/LastArticlesBlock/index.ts @@ -0,0 +1 @@ +export * from './LastArticlesBlock'; diff --git a/src/components/Organisms/Blocks/LastTutorialsBlock/index.ts b/src/components/Organisms/Blocks/LastTutorialsBlock/index.ts new file mode 100644 index 00000000..57e1c270 --- /dev/null +++ b/src/components/Organisms/Blocks/LastTutorialsBlock/index.ts @@ -0,0 +1 @@ +export * from './LastTutorialsBlock'; diff --git a/src/components/Organisms/Blocks/index.ts b/src/components/Organisms/Blocks/index.ts new file mode 100644 index 00000000..8236856a --- /dev/null +++ b/src/components/Organisms/Blocks/index.ts @@ -0,0 +1,2 @@ +export * from './LastArticlesBlock'; +export * from './LastTutorialsBlock'; diff --git a/src/components/Organisms/index.ts b/src/components/Organisms/index.ts index 6b381208..1d1c8b4f 100644 --- a/src/components/Organisms/index.ts +++ b/src/components/Organisms/index.ts @@ -2,3 +2,4 @@ export * from './PostCardList'; export * from './Autocomplete'; export * from './Header'; export * from './Footer'; +export * from './Blocks'; diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index c8427c04..f3b05269 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -1,13 +1,12 @@ import React from 'react'; -import type { HomeIntroBlockProps } from '@/components'; -import { Box } from '@/components'; -import { HomeIntroBlock } from '@/components'; -import { NewsletterCard, type NewsletterCardProps } from '@/components/Molecules/Cards/NewsletterCard'; -import type { LastArticlesBlockProps } from '@/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock'; -import { LastArticlesBlock } from '@/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock'; -import type { LastTutorialsBlockProps } from '@/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock'; -import { LastTutorialsBlock } from '@/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock'; +import type { + HomeIntroBlockProps, + LastArticlesBlockProps, + LastTutorialsBlockProps, + NewsletterCardProps, +} from '@/components'; +import { Box, HomeIntroBlock, LastArticlesBlock, LastTutorialsBlock, NewsletterCard } from '@/components'; export type HomePageProps = { homeIntroBlock: HomeIntroBlockProps; diff --git a/src/pages/PostPage/PostPage.scss b/src/pages/PostPage/PostPage.scss new file mode 100644 index 00000000..b1e2a675 --- /dev/null +++ b/src/pages/PostPage/PostPage.scss @@ -0,0 +1,87 @@ +@use 'sass:map'; +@use '@/styles/abstracts' as *; + +$heading-markup-config: map-get-strict($token-variables, 'typography', 'heading-markup'); +$headings-by-compoent-variant-name: ( + 's': 'h5', + 'm': 'h4', + 'l': 'h3', + 'xl': 'h2', +); + +@mixin heading($config) { + $base-properties: (); + + @if map.get($config, 'base') { + $base-properties: map.get($config, 'base'); + } + + @each $component-variant-name, $properties in $config { + @if $component-variant-name != 'base' { + #{map-get-strict($headings-by-compoent-variant-name, $component-variant-name)} { + @each $property-name, $property-value in map.merge($base-properties, $properties) { + #{$property-name}: #{$property-value}; + } + } + } + } +} + +.post-page { + --height-cover-post-page: 160px; + + &__breadcrumb { + margin: #{map-get-strict($token-variables, 'spacing', 's')} 0; + padding: 0; + } + + &__cover { + object-fit: cover; + width: 100%; + height: var(--height-cover-post-page); + border-radius: #{map-get-strict($token-variables, 'radius', 'xs')}; + + @include create-media-queries('md') { + --height-cover-post-page: 335px; + } + } + + &__content { + @include heading($heading-markup-config); + + p, ul, ol, blockquote { + margin: 0 0 #{map-get-strict($token-variables, 'spacing', 'xs')} 0; + } + + blockquote { + padding: 0 var(--spacing-xxl); + font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')}; + font-size: #{map-get-strict($token-variables, 'typography', 'text', 'm', 'font-size')}; + font-style: italic; + line-height: #{map-get-strict($token-variables, 'line-height', 'base')}; + + &::before, &::after { + content: "“"; + display: block; + height: 3rem; + line-height: 6rem; + font-size: 8rem; + font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')}; + color: #{map-get-strict($token-variables, 'color', 'primary')}; + } + + &::before { + margin-left: calc(var(--spacing-xxl) * -1); + } + + &::after { + margin-right: calc(var(--spacing-xxl) * -1); + transform: rotate(180deg); + } + } + + figure { + text-align: center; + } + } +} diff --git a/src/pages/PostPage/PostPage.tsx b/src/pages/PostPage/PostPage.tsx index 98a7e249..eabf0060 100644 --- a/src/pages/PostPage/PostPage.tsx +++ b/src/pages/PostPage/PostPage.tsx @@ -1,21 +1,37 @@ import React from 'react'; -import { SummaryCard } from '@/components'; +import { Box, Breadcrumb, type BreadcrumbProps, SummaryCard } from '@/components'; import { LayoutContentWithSidebar } from '@/templates/LayoutContentWithSidebar'; +import type { ComponentPropsWithoutRef } from '@/types'; +import './PostPage.scss'; import { PostPageContent } from './PostPageContent'; import type { PostPageContentProps } from './PostPageContent'; -export interface PostPageProps extends PostPageContentProps {} +export interface PostPageProps extends PostPageContentProps { + breadcrumb: BreadcrumbProps; + cover: ComponentPropsWithoutRef<'img'>; +} -export const PostPage: React.FC = ({ variant = 'article', summary, children, ...postPageContent }) => ( - - {children} - - } - sidebar={} - /> +export const PostPage: React.FC = ({ + variant = 'article', + breadcrumb, + cover, + summary, + children, + ...postPageContent +}) => ( + + + {cover.alt} + + {children} + + } + sidebar={} + /> + ); diff --git a/src/pages/PostPage/PostPageContent.scss b/src/pages/PostPage/PostPageContent.scss deleted file mode 100644 index b61b5acf..00000000 --- a/src/pages/PostPage/PostPageContent.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use 'sass:map'; -@use '@/styles/abstracts' as *; - -$heading-markup-config: map-get-strict($token-variables, 'typography', 'heading-markup'); -$headings-by-compoent-variant-name: ( - 's': 'h5', - 'm': 'h4', - 'l': 'h3', - 'xl': 'h2', -); - -@mixin heading($config) { - $base-properties: (); - - @if map.get($config, 'base') { - $base-properties: map.get($config, 'base'); - } - - @each $component-variant-name, $properties in $config { - @if $component-variant-name != 'base' { - #{map-get-strict($headings-by-compoent-variant-name, $component-variant-name)} { - @each $property-name, $property-value in map.merge($base-properties, $properties) { - #{$property-name}: #{$property-value}; - } - } - } - } -} - -.post-page-content { - --height-cover-post-page: 160px; - - &__cover { - margin-top: #{map-get-strict($token-variables, 'spacing', 's')}; - object-fit: cover; - width: 100%; - height: var(--height-cover-post-page); - border-radius: #{map-get-strict($token-variables, 'radius', 'xs')}; - - @include create-media-queries('md') { - --height-cover-post-page: 335px; - } - } - - @include heading($heading-markup-config); - - p, ul, ol, blockquote { - margin: 0 0 #{map-get-strict($token-variables, 'spacing', 'xs')} 0; - } - - blockquote { - padding: 0 var(--spacing-xxl); - font-family: Georgia, #{map-get-strict($token-variables, 'font-family', 'blockquote')}; - font-size: #{map-get-strict($token-variables, 'typography', 'text', 'm', 'font-size')}; - font-style: italic; - line-height: #{map-get-strict($token-variables, 'line-height', 'base')}; - - &::before, &::after { - content: "“"; - display: block; - height: 3rem; - line-height: 6rem; - font-size: 8rem; - font-weight: #{map-get-strict($token-variables, 'font-weight', 'medium')}; - color: #{map-get-strict($token-variables, 'color', 'primary')}; - } - - &::before { - margin-left: calc(var(--spacing-xxl) * -1); - } - - &::after { - margin-right: calc(var(--spacing-xxl) * -1); - transform: rotate(180deg); - } - } - - figure { - text-align: center; - } -} diff --git a/src/pages/PostPage/PostPageContent.tsx b/src/pages/PostPage/PostPageContent.tsx index 23330a11..520ac494 100644 --- a/src/pages/PostPage/PostPageContent.tsx +++ b/src/pages/PostPage/PostPageContent.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import type { BreadcrumbProps, ContactCardProps } from '@/components'; +import type { ContactCardProps } from '@/components'; import { SummaryCard, type SummaryCardProps } from '@/components'; -import { Breadcrumb } from '@/components'; import { Button, Flex } from '@/components'; import { Box } from '@/components'; import { ContactCard, Divider } from '@/components'; @@ -10,7 +9,6 @@ import type { ComponentPropsWithoutRef } from '@/types'; import { PostFooter } from './PostFooter'; import { PostHeader } from './PostHeader'; -import './PostPageContent.scss'; import { RelatedPostList } from './RelatedPostList'; import type { PostFooterProps } from './PostFooter'; @@ -22,9 +20,7 @@ export type PostPageVariantType = (typeof postPageVariant)[number]; export interface PostPageContentProps { variant: PostPageVariantType; - breadcrumb: BreadcrumbProps; summary: SummaryCardProps; - cover: ComponentPropsWithoutRef<'img'>; header: Omit; children: React.ReactNode; footer: PostFooterProps; @@ -32,12 +28,12 @@ export interface PostPageContentProps { relatedPostList: RelatedPostListProps; previousLink?: { label: string } & ComponentPropsWithoutRef<'a'>; nextLink?: { label: string } & ComponentPropsWithoutRef<'a'>; + className?: string; } export const PostPageContent: React.FC = ({ variant = 'article', - breadcrumb, - cover, + summary, header, children, @@ -48,13 +44,13 @@ export const PostPageContent: React.FC = ({ nextLink: { label: nextLinkLabel, ...nextLink } = {}, }) => ( <> - - - {cover.alt} - + + - {children} + + {children} + {variant === 'tutorial' && ( <>