@apify/ui-library 1.118.0 → 1.120.0

package/src/components/text/heading_content.stories.tsx

@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { HeadingContent, type HeadingContentProps } from './heading_content.js';
+
+export default {
+    title: 'Design Tokens/Typography/HeadingContent',
+    component: HeadingContent,
+    parameters: {
+        docs: {
+            description: {
+                component: '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component. '
+                + 'It provides content-specific heading styles for markdown rendering. \n'
+                + 'For general heading usage, use HeadingShared or HeadingMarketing instead.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6'],
+            description: 'The heading level (maps to h1-h6, responsive across mobile/tablet/desktop)',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element to render as (overrides default for each type)',
+        },
+        children: {
+            control: 'text',
+            description: 'The heading text content',
+        },
+        color: {
+            control: 'color',
+            description: 'Custom color for the heading',
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment',
+        },
+        italic: {
+            control: 'boolean',
+            description: 'Apply italic style',
+        },
+        uppercase: {
+            control: 'boolean',
+            description: 'Transform text to uppercase',
+        },
+    },
+} as Meta<HeadingContentProps>;
+
+type Story = StoryObj<HeadingContentProps>;
+
+const StoryWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+    max-width: 800px;
+`;
+
+const HeadingShowcase = styled.div`
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    small {
+        display: block;
+        color: #666;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+    }
+`;
+
+const WarningBanner = styled.div`
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+
+    strong {
+        color: #856404;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    p {
+        color: #856404;
+        margin: 0;
+        font-size: 0.875rem;
+    }
+`;
+
+/**
+ * Default content heading (used by SimpleMarkdown)
+ *
+ * ⚠️ This component is for internal use by SimpleMarkdown only
+ */
+export const Default: Story = {
+    args: {
+        type: 'heading1',
+        children: 'Content Heading',
+    },
+};
+
+/**
+ * All content heading levels as used in SimpleMarkdown component
+ *
+ * ⚠️ These heading styles are specifically designed for markdown content rendering.
+ * For general application headings, use HeadingShared or HeadingMarketing.
+ */
+export const AllVariants: Story = {
+    render: () => (
+        <StoryWrapper>
+            <WarningBanner>
+                <strong>⚠️ Internal Component</strong>
+                <p>
+                    HeadingContent is used exclusively by the SimpleMarkdown component for rendering
+                    markdown headings. For general heading usage in your application, use HeadingShared
+                    or HeadingMarketing components instead.
+                </p>
+            </WarningBanner>
+
+            <HeadingShowcase>
+                <small>heading1 (default: h1) - Used for # in markdown</small>
+                <HeadingContent type="heading1">
+                    Heading 1 - Main Document Title
+                </HeadingContent>
+            </HeadingShowcase>
+
+            <HeadingShowcase>
+                <small>heading2 (default: h2) - Used for ## in markdown</small>
+                <HeadingContent type="heading2">
+                    Heading 2 - Major Section
+                </HeadingContent>
+            </HeadingShowcase>
+
+            <HeadingShowcase>
+                <small>heading3 (default: h3) - Used for ### in markdown</small>
+                <HeadingContent type="heading3">
+                    Heading 3 - Subsection
+                </HeadingContent>
+            </HeadingShowcase>
+
+            <HeadingShowcase>
+                <small>heading4 (default: h4) - Used for #### in markdown</small>
+                <HeadingContent type="heading4">
+                    Heading 4 - Minor Section
+                </HeadingContent>
+            </HeadingShowcase>
+
+            <HeadingShowcase>
+                <small>heading5 (default: h5) - Used for ##### in markdown</small>
+                <HeadingContent type="heading5">
+                    Heading 5 - Sub-minor Section
+                </HeadingContent>
+            </HeadingShowcase>
+
+            <HeadingShowcase>
+                <small>heading6 (default: h6) - Used for ###### in markdown</small>
+                <HeadingContent type="heading6">
+                    Heading 6 - Smallest Heading
+                </HeadingContent>
+            </HeadingShowcase>
+        </StoryWrapper>
+    ),
+};

package/src/components/text/heading_marketing.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { HeadingMarketing, type HeadingMarketingProps } from './heading_marketing.js';
+
+export default {
+    title: 'Design Tokens/Typography/HeadingMarketing',
+    component: HeadingMarketing,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Marketing headings are designed for promotional and web-facing content. '
+                + 'These typography elements are primarily used for marketing pages, landing pages,'
+                + ' and other web components where a strong visual presence is needed.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['titleXs', 'titleS', 'titleM', 'titleMl', 'titleL', 'titleXl', 'title2xl', 'title3xl'],
+            description: 'The heading size type (responsive across mobile/tablet/desktop)',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element to render as (overrides default for each type)',
+        },
+        children: {
+            control: 'text',
+            description: 'The heading text content',
+        },
+        color: {
+            control: 'color',
+            description: 'Custom color for the heading',
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment',
+        },
+        italic: {
+            control: 'boolean',
+            description: 'Apply italic style',
+        },
+        uppercase: {
+            control: 'boolean',
+            description: 'Transform text to uppercase',
+        },
+    },
+} as Meta<HeadingMarketingProps>;
+
+type Story = StoryObj<HeadingMarketingProps>;
+
+const StoryWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+`;
+
+const HeadingShowcase = styled.div`
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    small {
+        display: block;
+        color: #666;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+    }
+`;
+
+/**
+ * Default marketing heading
+ */
+export const Default: Story = {
+    args: {
+        type: 'titleL',
+        children: 'Marketing Heading',
+    },
+};
+
+/**
+ * All marketing heading sizes displayed together
+ */
+export const AllSizes: Story = {
+    render: () => (
+        <StoryWrapper>
+            <HeadingShowcase>
+                <small>title3xl (default: h1)</small>
+                <HeadingMarketing type="title3xl">Largest Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>title2xl (default: h1)</small>
+                <HeadingMarketing type="title2xl">Extra Large Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleXl (default: h2)</small>
+                <HeadingMarketing type="titleXl">Very Large Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleL (default: h3)</small>
+                <HeadingMarketing type="titleL">Large Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleMl (default: h4)</small>
+                <HeadingMarketing type="titleMl">Medium-Large Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleM (default: h4)</small>
+                <HeadingMarketing type="titleM">Medium Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleS (default: h5)</small>
+                <HeadingMarketing type="titleS">Small Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleXs (default: h6)</small>
+                <HeadingMarketing type="titleXs">Extra Small Marketing Title</HeadingMarketing>
+            </HeadingShowcase>
+        </StoryWrapper>
+    ),
+};

package/src/components/text/heading_shared.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { HeadingShared, type HeadingSharedProps } from './heading_shared.js';
+
+export default {
+    title: 'Design Tokens/Typography/HeadingShared',
+    component: HeadingShared,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Shared headings are the standard typography component used throughout the console and shared components. '
+                + 'This is the default choice for most heading needs. **If you\'re unsure which heading component to use, choose this one.**',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['titleXs', 'titleS', 'titleM', 'titleL', 'titleXl', 'title2xl', 'title3xl'],
+            description: 'The heading size type (responsive across mobile/tablet/desktop)',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element to render as (overrides default for each type)',
+        },
+        children: {
+            control: 'text',
+            description: 'The heading text content',
+        },
+        color: {
+            control: 'color',
+            description: 'Custom color for the heading',
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment',
+        },
+        italic: {
+            control: 'boolean',
+            description: 'Apply italic style',
+        },
+        uppercase: {
+            control: 'boolean',
+            description: 'Transform text to uppercase',
+        },
+    },
+} as Meta<HeadingSharedProps>;
+
+type Story = StoryObj<HeadingSharedProps>;
+
+const StoryWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+`;
+
+const HeadingShowcase = styled.div`
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    small {
+        display: block;
+        color: #666;
+        font-size: 0.875rem;
+        margin-bottom: 0.5rem;
+    }
+`;
+
+/**
+ * Default shared heading
+ */
+export const Default: Story = {
+    args: {
+        type: 'titleL',
+        children: 'Shared Typography Heading',
+    },
+};
+
+/**
+ * All shared heading sizes displayed together
+ */
+export const AllSizes: Story = {
+    render: () => (
+        <StoryWrapper>
+            <HeadingShowcase>
+                <small>title3xl (default: h1)</small>
+                <HeadingShared type="title3xl">Largest Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>title2xl (default: h1)</small>
+                <HeadingShared type="title2xl">Extra Large Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleXl (default: h2)</small>
+                <HeadingShared type="titleXl">Very Large Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleL (default: h3)</small>
+                <HeadingShared type="titleL">Large Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleM (default: h4)</small>
+                <HeadingShared type="titleM">Medium Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleS (default: h5)</small>
+                <HeadingShared type="titleS">Small Shared Title</HeadingShared>
+            </HeadingShowcase>
+            <HeadingShowcase>
+                <small>titleXs (default: h6)</small>
+                <HeadingShared type="titleXs">Extra Small Shared Title</HeadingShared>
+            </HeadingShowcase>
+        </StoryWrapper>
+    ),
+};

package/src/components/text/text_content.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { type ContentTextProps, TextContent } from './text_content.js';
+
+export default {
+    title: 'Design Tokens/Typography/TextContent',
+    component: TextContent,
+    parameters: {
+        docs: {
+            description: {
+                component: '⚠️ **Internal Component**: This component is specifically designed for use within the SimpleMarkdown component.'
+                    + ' It provides content-specific text styles for markdown rendering (paragraphs and code snippets).'
+                    + ' For general text usage, use TextShared or TextMarketing instead.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['paragraph', 'snippet'],
+            description: 'Text type: paragraph for regular markdown text, snippet for inline code',
+        },
+        weight: {
+            control: { type: 'select' },
+            options: ['normal', 'bold'],
+            description: 'Font weight',
+        },
+        as: {
+            control: 'text',
+            description: 'The HTML element to render as (default: p)',
+        },
+        children: {
+            control: 'text',
+            description: 'The text content',
+        },
+        color: {
+            control: 'color',
+            description: 'Custom color for the text',
+        },
+        align: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right'],
+            description: 'Text alignment',
+        },
+        italic: {
+            control: 'boolean',
+            description: 'Apply italic style',
+        },
+        uppercase: {
+            control: 'boolean',
+            description: 'Transform text to uppercase',
+        },
+    },
+} as Meta<ContentTextProps>;
+
+type Story = StoryObj<ContentTextProps>;
+
+const StoryWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 2rem;
+    max-width: 800px;
+`;
+
+const TextShowcase = styled.div`
+    padding: 1rem;
+    background: #f5f5f5;
+    border-radius: 4px;
+
+    small {
+        display: block;
+        color: #666;
+        font-size: 0.75rem;
+        margin-bottom: 0.5rem;
+        font-family: monospace;
+    }
+`;
+
+const WarningBanner = styled.div`
+    background: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 4px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+
+    strong {
+        color: #856404;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    p {
+        color: #856404;
+        margin: 0;
+        font-size: 0.875rem;
+    }
+`;
+
+/**
+ * Default content text (used by SimpleMarkdown)
+ *
+ * ⚠️ This component is for internal use by SimpleMarkdown only
+ */
+export const Default: Story = {
+    args: {
+        type: 'paragraph',
+        weight: 'normal',
+        children: 'Content text for markdown rendering.',
+    },
+};
+
+/**
+ * All content text variants as used in SimpleMarkdown component
+ *
+ * ⚠️ These text styles are specifically designed for markdown content rendering.
+ * For general application text, use TextShared or TextMarketing.
+ */
+export const AllVariants: Story = {
+    render: () => (
+        <StoryWrapper>
+            <WarningBanner>
+                <strong>⚠️ Internal Component</strong>
+                <p>
+                    TextContent is used exclusively by the SimpleMarkdown component for rendering
+                    markdown paragraphs and inline code snippets. For general text usage in your
+                    application, use TextShared or TextMarketing components instead.
+                </p>
+            </WarningBanner>
+
+            <div>
+                <h3 style={{ marginTop: 0, marginBottom: '1rem' }}>Paragraph Type</h3>
+                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
+                    Used for regular text content in markdown documents
+                </p>
+
+                <TextShowcase>
+                    <small>type=paragraph, weight=normal</small>
+                    <TextContent type="paragraph" weight="normal">
+                        This is a paragraph with normal weight, used for standard markdown text content.
+                        It provides optimal readability for documentation and readme files.
+                    </TextContent>
+                </TextShowcase>
+
+                <TextShowcase>
+                    <small>type=paragraph, weight=bold</small>
+                    <TextContent type="paragraph" weight="bold">
+                        This is a paragraph with bold weight, used for **strong text** in markdown.
+                        It creates emphasis for important information within the content.
+                    </TextContent>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3 style={{ marginBottom: '1rem' }}>Snippet Type</h3>
+                <p style={{ fontSize: '0.875rem', color: '#666', marginBottom: '1rem' }}>
+                    Used for inline code within markdown text (e.g., `code`)
+                </p>
+
+                <TextShowcase>
+                    <small>type=snippet, weight=normal</small>
+                    <TextContent type="snippet" weight="normal">
+                        const inlineCode = &quot;monospace text for code snippets&quot;;
+                    </TextContent>
+                </TextShowcase>
+
+                <TextShowcase>
+                    <small>type=snippet, weight=bold</small>
+                    <TextContent type="snippet" weight="bold">
+                        function boldCodeSnippet() &#123; return &quot;emphasized code&quot;; &#125;
+                    </TextContent>
+                </TextShowcase>
+            </div>
+
+            <div style={{ marginTop: '2rem', padding: '1.5rem', border: '1px solid #e0e0e0', borderRadius: '4px' }}>
+                <h4 style={{ marginTop: 0 }}>Example in Markdown Context</h4>
+                <TextContent type="paragraph" weight="normal" mb="space8">
+                    The SimpleMarkdown component uses these styles to render markdown. For example,
+                    when you write code like <TextContent type="snippet" weight="normal" as="span">npm install</TextContent> inline,
+                    it uses the snippet type.
+                </TextContent>
+                <TextContent type="paragraph" weight="bold">
+                    Bold text in markdown is rendered using paragraph with bold weight.
+                </TextContent>
+            </div>
+        </StoryWrapper>
+    ),
+};