fix: post cover

.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"
  ]

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',
  },
  ],

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"

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<BreadcrumbProps> = ({ items, ...props }) => (
@@ -17,7 +19,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({ 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) => (
  <Fragment key={index}>

src/components/Organisms/Blocks/LastArticlesBlock/index.ts

@@ -0,0 +1 @@
+export * from './LastArticlesBlock';

src/components/Organisms/Blocks/LastTutorialsBlock/index.ts

@@ -0,0 +1 @@
+export * from './LastTutorialsBlock';

src/components/Organisms/Blocks/index.ts

@@ -0,0 +1,2 @@
+export * from './LastArticlesBlock';
+export * from './LastTutorialsBlock';

src/components/Organisms/index.ts

@@ -2,3 +2,4 @@ export * from './PostCardList';
 export * from './Autocomplete';
 export * from './Header';
 export * from './Footer';
+export * from './Blocks';

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;

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;
+ }
+ }
+}

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<PostPageProps> = ({ variant = 'article', summary, children, ...postPageContent }) => (
- <LayoutContentWithSidebar
- content={
- <PostPageContent variant={variant} summary={summary} {...postPageContent}>
- {children}
- </PostPageContent>
- }
- sidebar={<SummaryCard hiddenBelow="md" variant={variant === 'tutorial' ? 'secondary' : 'primary'} {...summary} />}
- />
+export const PostPage: React.FC<PostPageProps> = ({
+ variant = 'article',
+ breadcrumb,
+ cover,
+ summary,
+ children,
+ ...postPageContent
+}) => (
+ <Box mx="auto" width="content-container" className="post-page">
+ <Breadcrumb {...breadcrumb} className="post-page__breadcrumb" />
+ <img className="post-page__cover" {...cover} alt={cover.alt} />
+ <LayoutContentWithSidebar
+ content={
+ <PostPageContent {...postPageContent} variant={variant} summary={summary}>
+ {children}
+ </PostPageContent>
+ }
+ sidebar={<SummaryCard hiddenBelow="md" variant={variant === 'tutorial' ? 'secondary' : 'primary'} {...summary} />}
+ />
+ </Box>
 );