@orangesk/orange-design-system 3.0.0 → 3.1.0

package/build/search-index.json

@@ -85,7 +85,7 @@
   },
   {
     "href": "/components/feature-accordion",
-    "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Responsive images with srcset Use data-image-srcset to provide multiple image resolutions for different screen densities. <h3 className=\"bold\">AI-powered camera with enhanced clarity</h3> <p>High-resolution images for retina displays</p> Learn More <h3 className=\"bold\">Professional photography setup</h3> <p>Optimized for high-DPI screens</p> Learn More Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via data-image-alt attribute - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, the JavaScript module automatically generates images from data-image-url, data-image-alt, and data-image-srcset attributes on accordion items. API React Props FeatureAccordion | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------------- | ------------------ | ------- | ------------------------------------------------------------------ | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | data-image-url | string | - | Image URL (or use imageUrl prop) | | data-image-alt | string | - | Image alt text (or use imageAlt prop) | | data-image-srcset | string | - | Image srcset for responsive images (or use imageSrcSet prop) | | data-image | string \\| object | - | Responsive image object with breakpoint keys (or use image prop) | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: data-image > data-image-srcset + data-image-url > data-image-url Vanilla HTML: In non-React environments, images are automatically generated from data-image-url, data-image-alt, and data-image-srcset attributes on the accordion item element. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | itemSelector | string | \"[data-feature-accordion-item]\" | Selector for accordion items | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | | imageSelector | string | \"[data-feature-accordion-image]\" | Selector for images | FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
+    "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. Content Guidelines - A 4:3 asset at 640x480 is recommended for the default preview shape. - Portrait and other aspect ratios can be used when content benefits from them. - Source images work best when they are at least 640px wide. - At xl (1240px) and above, desktop preview area stays 640px wide while image keeps its own intrinsic aspect ratio. - Below xl, layout stacks and preview image fills available container width. - Large assets benefit from optional higher-density srcset variants. - Main content titles work best when kept to about 3 lines, roughly 84 characters. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Variable content lengths Use different heading and body lengths when accordion items need more or less text content. <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\" } </p> <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.\" } </p> Portrait images Portrait images are supported. Use source images that are at least 640px wide for sharp desktop rendering. <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus.\" } </p> {\"Button\"} <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Centered preview alignment Use align-self- classes on feature-accordionpreview elements, such as align-self-middle, with alignment utilities when the preview image should align differently from the default top alignment on desktop. <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Responsive images with srcset Use imageSrcSet to provide multiple image resolutions for different screen densities. Keep all variants visually consistent for same item. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via imageAlt prop - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, render preview images directly in HTML. JavaScript switches already rendered images; it no longer generates missing preview markup. API React Props FeatureAccordion | Prop | Type | Default | Description | | ------------------ | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | previewClassName | string | - | Additional CSS classes for preview area | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------- | ------------------ | ------- | -------------------------------------------------------------------- | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | imageUrl | string | - | Simple image URL | | imageAlt | string | - | Image alt text | | imageSrcSet | string | - | Image srcset for responsive images | | image | string \\| object | - | Image source, typically responsive image object with breakpoint keys | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: image > imageSrcSet + imageUrl > imageUrl Image spec: Recommended preview asset is 4:3 at 640x480, but portrait and other aspect ratios are supported. Source image should be at least 640px wide. At xl (1240px) and above, desktop preview area is 640px wide. Below xl, preview image expands to available container width. Image height always follows its intrinsic aspect ratio. Use appropriately sized assets and optional srcset variants for sharper displays. Content limit: Main item title should stay within 3 lines, about 84 characters maximum. Vanilla HTML: In non-React environments, render preview images in final HTML with data-feature-accordion-image. Do not rely on JS to create them from item data attributes. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | HTML / CSS Contract - Desktop layout switches at xl. - Desktop preview wrapper is fixed 640x480. - Accordion column fills remaining width. - Below xl, layout stacks and preview height becomes automatic. - Non-React HTML must include final preview image markup; JS only toggles visibility and active accordion state. FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
   },
   {
     "href": "/components/footer",