@eleven-labs/design-system 0.10.3 → 0.21.0

package/dist/pages/AuthorPage/AuthorPage.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
+export type SocialNetworkName = 'github' | 'twitter' | 'linkedin';
+export type AuthorPageProps = {
+    author: {
+        username: string;
+        name: string;
+        avatarImageUrl?: string;
+        content: string;
+        socialNetworks?: {
+            name: SocialNetworkName;
+            url: string;
+            username: string;
+        }[];
+    };
+    emptyAvatarImageUrl: string;
+    title: React.ReactNode;
+    postCardList: React.ReactNode;
+    newsletterCard: NewsletterCardProps;
+};
+export declare const AuthorPage: React.FC<AuthorPageProps>;

package/dist/pages/AuthorPage/index.d.ts

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

package/dist/pages/CategoryPage/CategoryPage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CategoryEndingBlockProps, CategoryIntroBlockProps } from '../../components';
+import type { NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
+export type CategoryPageProps = {
+    categoryIntroBlock: CategoryIntroBlockProps;
+    categoryEndingBlock: CategoryEndingBlockProps;
+    title: React.ReactNode;
+    postCardList: React.ReactNode;
+    newsletterCard: NewsletterCardProps;
+};
+export declare const CategoryPage: React.FC<CategoryPageProps>;

package/dist/pages/CategoryPage/index.d.ts

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

package/dist/pages/HomePage/HomePage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { HomeIntroBlockProps } from '../../components';
+import { type NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
+import type { LastArticlesBlockProps } from '../../components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock';
+import type { LastTutorialsBlockProps } from '../../components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock';
+export type HomePageProps = {
+    homeIntroBlock: HomeIntroBlockProps;
+    lastArticlesBlock: LastArticlesBlockProps;
+    lastTutorialsBlock: LastTutorialsBlockProps;
+    newsletterCard: NewsletterCardProps;
+};
+export declare const HomePage: React.FC<HomePageProps>;

package/dist/pages/HomePage/index.d.ts

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

package/dist/pages/NotFoundPage/NotFoundPage.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type NotFoundPageProps = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+};
+export declare const NotFoundPage: React.FC<NotFoundPageProps>;

package/dist/pages/NotFoundPage/index.d.ts

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

package/dist/pages/PostPage/PostFooter/PostFooter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { AuthorCardProps, BoxProps } from '../../../components';
+export interface PostFooterProps extends BoxProps {
+    title: React.ReactNode;
+    authors: AuthorCardProps[];
+}
+export declare const PostFooter: React.FC<PostFooterProps>;

package/dist/pages/PostPage/PostFooter/index.d.ts

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

package/dist/pages/PostPage/PostHeader/PostHeader.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { BoxProps } from '../../../components';
+import { type ShareLinksProps } from '../../../components/Molecules/ShareLinks';
+import type { ComponentPropsWithoutRef } from '../../../types';
+export interface PostHeaderProps extends BoxProps {
+    title: React.ReactNode;
+    date: string;
+    readingTime: number;
+    authors: {
+        username: string;
+        name: string;
+        link: ComponentPropsWithoutRef<'a'>;
+    }[];
+    shareLinks: ShareLinksProps;
+}
+export declare const PostHeader: React.FC<PostHeaderProps>;

package/dist/pages/PostPage/PostHeader/index.d.ts

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

package/dist/pages/PostPage/PostPage.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { BreadcrumbProps, ContactCardProps, SummaryCardProps } from '../../components';
+import type { ComponentPropsWithoutRef } from '../../types';
+import type { PostFooterProps } from './PostFooter';
+import type { PostHeaderProps } from './PostHeader';
+import type { RelatedPostListProps } from './RelatedPostList';
+export declare const postPageVariant: readonly ["article", "tutorial"];
+export type PostPageVariantType = (typeof postPageVariant)[number];
+export interface PostPageProps {
+    variant: PostPageVariantType;
+    breadcrumb: BreadcrumbProps;
+    header: Omit<PostHeaderProps, 'contentType'>;
+    children: React.ReactNode;
+    footer: PostFooterProps;
+    contactCard: ContactCardProps;
+    relatedPostList: RelatedPostListProps;
+    summary: SummaryCardProps;
+    previousLink?: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+    nextLink?: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+}
+export declare const PostPage: React.FC<PostPageProps>;

package/dist/pages/PostPage/RelatedPostList/RelatedPostList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { BoxProps, PostCardProps } from '../../../components';
+export interface RelatedPostListProps extends BoxProps {
+    relatedPostListTitle: string;
+    posts: PostCardProps[];
+}
+export declare const RelatedPostList: React.FC<RelatedPostListProps>;

package/dist/pages/PostPage/RelatedPostList/index.d.ts

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

package/dist/pages/PostPage/index.d.ts

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

package/dist/pages/SearchPage/SearchPage.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { NotFoundBlockProps } from '../../components';
+import { type NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
+export type SearchPageProps = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    postCardList: React.ReactNode;
+    newsletterCard: NewsletterCardProps;
+    searchNotFound?: NotFoundBlockProps;
+    isLoading?: boolean;
+};
+export declare const SearchPage: React.FC<SearchPageProps>;

package/dist/pages/SearchPage/index.d.ts

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

package/dist/pages/index.d.ts

@@ -0,0 +1,6 @@
+export * from './CategoryPage';
+export * from './HomePage';
+export * from './PostPage';
+export * from './AuthorPage';
+export * from './NotFoundPage';
+export * from './SearchPage';

package/dist/scss/abstracts/functions/_get-cdn-assets-file.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use 'sass:string';
+@use '../variables' as *;
+
+@function get-cdn-assets-file($path) {
+  $full-path: #{map.get($token-variables, 'cdn-path')}#{$path};
+
+  @return string.slice($full-path, 2);
+}

package/dist/scss/abstracts/functions/_index.scss

@@ -1 +1,3 @@
 @forward 'list';
+@forward 'get-cdn-assets-file';
+@forward 'map-get-strict';

package/dist/scss/abstracts/functions/_map-get-strict.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+@function map-get-strict($map, $keys...) {
+  @if map.get($map, $keys...) {
+    @return map.get($map, $keys...);
+  } @else {
+    @error "Specified #{$keys} does not exist in the mapping";
+  }
+}

package/dist/scss/abstracts/variables/_token-variables.scss

@@ -1,13 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jan 2024 13:09:15 GMT
+ * Generated on Tue, 16 Jan 2024 16:30:14 GMT
  */
 
 $token-variables: (
-	'cdn-path': "https://eleven-labs.github.io/design-system/",
+	'cdn-path': "/",
 	'font-family': (
 		'base': var(--font-family-base),
-		'work-sans': var(--font-family-work-sans)
+		'heading': var(--font-family-heading),
+		'blockquote': var(--font-family-blockquote)
 	),
 	'font-size': (
 		'xxs': var(--font-size-xxs),
@@ -23,11 +24,13 @@ $token-variables: (
 	'font-weight': (
 		'regular': var(--font-weight-regular),
 		'medium': var(--font-weight-medium),
+		'semi-bold': var(--font-weight-semi-bold),
 		'bold': var(--font-weight-bold)
 	),
 	'typography': (
 		'heading': (
 			'base': (
+				'font-family': var(--typography-heading-base-font-family),
 				'line-height': var(--typography-heading-base-line-height),
 				'font-weight': var(--typography-heading-base-font-weight)
 			),
@@ -123,25 +126,20 @@ $token-variables: (
 		'lg': 1201
 	),
 	'color': (
-		'primary': (
-			'azure': var(--color-azure),
-			'navy': var(--color-navy),
-			'seashell': var(--color-seashell)
-		),
-		'secondary': (
-			'lavender': var(--color-lavender),
-			'amaranth': var(--color-amaranth),
-			'yellow': var(--color-yellow)
-		),
-		'greyscale': (
-			'ultra-light-grey': var(--color-ultra-light-grey),
-			'light-grey': var(--color-light-grey),
-			'grey': var(--color-grey),
-			'dark-grey': var(--color-dark-grey),
-			'ultra-dark-grey': var(--color-ultra-dark-grey),
-			'black': var(--color-black),
-			'white': var(--color-white)
-		)
+		'primary': var(--color-primary),
+		'primary-dark': var(--color-primary-dark),
+		'primary-very-dark': var(--color-primary-very-dark),
+		'secondary': var(--color-secondary),
+		'secondary-dark': var(--color-secondary-dark),
+		'info': var(--color-info),
+		'accent': var(--color-accent),
+		'ultra-light-grey': var(--color-ultra-light-grey),
+		'light-grey': var(--color-light-grey),
+		'grey': var(--color-grey),
+		'dark-grey': var(--color-dark-grey),
+		'ultra-dark-grey': var(--color-ultra-dark-grey),
+		'black': var(--color-black),
+		'white': var(--color-white)
 	),
 	'height': (
 		'full': var(--height-full),
@@ -163,6 +161,7 @@ $token-variables: (
 	),
 	'width': (
 		'full': var(--width-full),
-		'screen': var(--width-screen)
+		'screen': var(--width-screen),
+		'content-container': var(--width-content-container)
 	)
 )

package/dist/scss/abstracts/variables/_variables.scss

@@ -1,43 +1,39 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jan 2024 13:09:15 GMT
+ * Generated on Tue, 16 Jan 2024 16:30:14 GMT
  */
 
-$white: #FFFFFF !default;
-$black: #000000 !default;
+$white: #FFF !default;
+$black: #000 !default;
 $ultra-dark-grey: #333333 !default;
 $dark-grey: #757575 !default;
 $grey: #9B9B9B !default;
 $light-grey: #C4C4C4 !default;
 $ultra-light-grey: #EDEDED !default;
-$yellow: #F3C93D !default;
-$amaranth: #DD3156 !default;
-$lavender: #E1EAF9 !default;
-$seashell: #e9f1f8 !default;
-$navy: #224579 !default;
-$azure: #3767B6 !default;
+$accent: #F8FA9B !default; // A distinct accent color for content.
+$info: #DD3156 !default; // Used to provide additional information to the user without conveying any particular level of importance.
+$secondary-dark: #C5D3E9 !default;
+$secondary: #E9F1F8 !default;
+$primary-very-dark: #093670 !default;
+$primary-dark: #194180 !default;
+$primary: #0A4084 !default;
 
 $variables: (
   'color': (
-    'primary': (
-      'azure': $azure,
-      'navy': $navy,
-      'seashell': $seashell
-    ),
-    'secondary': (
-      'lavender': $lavender,
-      'amaranth': $amaranth,
-      'yellow': $yellow
-    ),
-    'greyscale': (
-      'ultra-light-grey': $ultra-light-grey,
-      'light-grey': $light-grey,
-      'grey': $grey,
-      'dark-grey': $dark-grey,
-      'ultra-dark-grey': $ultra-dark-grey,
-      'black': $black,
-      'white': $white
-    )
+    'primary': $primary,
+    'primary-dark': $primary-dark,
+    'primary-very-dark': $primary-very-dark,
+    'secondary': $secondary,
+    'secondary-dark': $secondary-dark,
+    'info': $info,
+    'accent': $accent,
+    'ultra-light-grey': $ultra-light-grey,
+    'light-grey': $light-grey,
+    'grey': $grey,
+    'dark-grey': $dark-grey,
+    'ultra-dark-grey': $ultra-dark-grey,
+    'black': $black,
+    'white': $white
   )
 );