@apify/ui-library 1.119.0 → 1.120.1

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

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

@@ -0,0 +1,187 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { type MarketingTextProps, TextMarketing } from './text_marketing.js';
+
+export default {
+    title: 'Design Tokens/Typography/TextMarketing',
+    component: TextMarketing,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Marketing text is designed for promotional and web-facing content.'
+                    + ' These typography elements are primarily used for marketing pages, landing pages,'
+                    + ' and other web components where engaging, conversion-focused text is needed.',
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: ['large', 'regular', 'small', 'extraSmall'],
+            description: 'Text size (responsive across mobile/tablet/desktop)',
+        },
+        weight: {
+            control: { type: 'select' },
+            options: ['normal', 'medium', '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<MarketingTextProps>;
+
+type Story = StoryObj<MarketingTextProps>;
+
+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;
+    }
+`;
+
+/**
+ * Default marketing text
+ */
+export const Default: Story = {
+    args: {
+        size: 'regular',
+        weight: 'normal',
+        children: 'Marketing text for web pages and promotional content.',
+    },
+};
+
+/**
+ * All marketing text sizes and weights
+ */
+export const AllVariants: Story = {
+    render: () => (
+        <StoryWrapper>
+            <div>
+                <h3 style={{ marginTop: 0 }}>Large Size</h3>
+                <TextShowcase>
+                    <small>size=large, weight=normal</small>
+                    <TextMarketing size="large" weight="normal">
+                        Large marketing text with normal weight for introductory paragraphs.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=large, weight=medium</small>
+                    <TextMarketing size="large" weight="medium">
+                        Large marketing text with medium weight for emphasis.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=large, weight=bold</small>
+                    <TextMarketing size="large" weight="bold">
+                        Large marketing text with bold weight for strong statements.
+                    </TextMarketing>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Regular Size</h3>
+                <TextShowcase>
+                    <small>size=regular, weight=normal</small>
+                    <TextMarketing size="regular" weight="normal">
+                        Regular marketing text with normal weight for body content.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=regular, weight=medium</small>
+                    <TextMarketing size="regular" weight="medium">
+                        Regular marketing text with medium weight for emphasis.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=regular, weight=bold</small>
+                    <TextMarketing size="regular" weight="bold">
+                        Regular marketing text with bold weight for highlights.
+                    </TextMarketing>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Small Size</h3>
+                <TextShowcase>
+                    <small>size=small, weight=normal</small>
+                    <TextMarketing size="small" weight="normal">
+                        Small marketing text with normal weight for captions and metadata.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=small, weight=medium</small>
+                    <TextMarketing size="small" weight="medium">
+                        Small marketing text with medium weight for emphasis.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=small, weight=bold</small>
+                    <TextMarketing size="small" weight="bold">
+                        Small marketing text with bold weight for labels.
+                    </TextMarketing>
+                </TextShowcase>
+            </div>
+
+            <div>
+                <h3>Extra Small Size</h3>
+                <TextShowcase>
+                    <small>size=extraSmall, weight=normal</small>
+                    <TextMarketing size="extraSmall" weight="normal">
+                        Extra small marketing text with normal weight for fine print.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=extraSmall, weight=medium</small>
+                    <TextMarketing size="extraSmall" weight="medium">
+                        Extra small marketing text with medium weight for emphasis.
+                    </TextMarketing>
+                </TextShowcase>
+                <TextShowcase>
+                    <small>size=extraSmall, weight=bold</small>
+                    <TextMarketing size="extraSmall" weight="bold">
+                        Extra small marketing text with bold weight for micro labels.
+                    </TextMarketing>
+                </TextShowcase>
+            </div>
+        </StoryWrapper>
+    ),
+};