@apify/ui-library 1.171.1-uilibraryversion2candida-85b55e.71 → 1.171.1

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

@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import styled from 'styled-components';
+
+import { type ContentTextProps, TextContent } from './text_content';
+
+export default {
+    title: 'Design Tokens/Typography/TextContent',
+    component: TextContent,
+    tags: ['deprecated'],
+    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_content.tsx

@@ -80,7 +80,7 @@ const StyledTextContent = styled(TextBaseComponent)<StyledContentTextProps>`
 `;
 
 /**
- * Internal to SimpleMarkdown, not exported from the package. Use Text elsewhere.
+ * @deprecated Use Text or TextMarketing from ui-library
  */
 export const TextContent = forwardRef<HTMLElement | undefined, ContentTextProps>(
     ({ type, weight, as, ...rest }, ref) => {