@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
90 lines (89 loc) • 4.96 kB
TypeScript
import { Format } from '../shared';
import { JSX } from 'react';
type GetMetaIconLinksOptions = {
format?: Format;
};
/**
* Retrieves meta icon links in the specified format to be injected into the <head> at build time.
* Additional information can be found here: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-meta-icons--documentation
*
* @param {GetMetaIconLinksOptions} [options] - Optional settings for formatting the returned <link> elements.
* @param {'html' | 'jsx' | 'cra'} [options.format='jsx'] - Specifies the format of the output.
* - 'jsx' (default): Returns a JSX.Element with meta icon links.
* - 'html': Returns the styles as a raw HTML string.
* - 'cra': Returns HTML formatted links similar to 'html', intended for Create React App usage.
* @returns {string | JSX.Element} - The meta icon links in the specified format.
*
* @throws {Error} Throws an error if executed in a browser environment.
*
* @example
* // Returns a JSX.Element with meta icon links
* const jsxLinks = getMetaIconLinks();
*
* @example
* // Get styles as JSX element.
* const jsxLinks = getMetaIconLinks({ format: 'jsx' });
*
* @example
* // Returns <link> elements as an HTML string.
* const htmlLinks = getMetaIconLinks({ format: 'cra' });
*/
export declare function getMetaIconLinks(options: {
format: 'html';
}): string;
export declare function getMetaIconLinks(options?: {
format: 'jsx' | 'cra';
}): JSX.Element;
export declare function getMetaIconLinks(options?: GetMetaIconLinksOptions): string | JSX.Element;
type GetResetStylesOptions = {
format?: Exclude<Format, 'cra'>;
};
/**
* Retrieves reset styles to be injected into the <head> at build time, that ensure a consistent look for all components across the supported browsers.
* Additional information can be found here: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-css-reset--documentation
*
* @param {GetResetStylesOptions} [options] - Optional settings for formatting the returned <style> elements.
* @param {'jsx' | 'html'} [options.format='jsx'] - Specifies the format of the output.
* - 'jsx' (default): Returns a JSX.Element with <style> elements.
* - 'html': Returns the styles as a raw HTML string.
* @returns {string | JSX.Element} The reset styles formatted as a string (HTML) or JSX element.
*
* @throws {Error} Throws an error if executed in a browser environment.
*
* @example
* // Get reset styles as JSX element.
* const jsxResetStyles: JSX.Element = getResetStyles();
*
* @example
* // Get reset styles as an HTML string.
* const htmlResetStyles: string = getResetStyles({ format: 'html' });
*/
export declare function getResetStyles(options?: GetResetStylesOptions): string | JSX.Element;
type GetSSRStylesOptions = {
format?: Exclude<Format, 'cra'>;
};
declare const COMPONENT_NAME: readonly ["DSAccordion", "DSActionButton", "DSActionLink", "DSAriaLiveRegions", "DSBanner", "DSBreadcrumb", "DSButton", "DSButtonRound", "DSCheckbox", "DSCheckboxGroup", "DSChipGroup", "DSCombobox", "DSDialog", "DSDrawer", "DSFieldset", "DSFlag", "DSFloatingActionButton", "DSHeader", "DSHeading", "DSIcon", "DSInput", "DSInputFile", "DSInputPassword", "DSInputSearch", "DSInputStepper", "DSLink", "DSLinkButton", "DSLogo", "DSNavigationTabs", "DSNotification", "DSPopover", "DSRadioGroup", "DSScroller", "DSSelect", "DSSkipToContent", "DSSlider", "DSSpinner", "DSSwitch", "DSSystemFeedback", "DSTabs", "DSText", "DSTextarea", "DSTitle", "DSToastManager", "DSTopBar"];
export type ComponentName = (typeof COMPONENT_NAME)[number];
/**
* Retrieves server-side rendered (SSR) styles for the specified components to be injected into the <head> at build time.
* Additional information can be found here: https://main--63440bbb95889041542a5ba3.chromatic.com/?path=/docs/utilities-partials-ssr-styles--documentation
*
* @param {ComponentName[]} componentNames - An array of component names for which styles are required.
* @param {GetSSRStylesOptions} [options] - Optional settings for formatting the returned <style> elements.
* @param {'jsx' | 'html'} [options.format='jsx'] - Specifies the format of the output.
* - 'jsx' (default): Returns a JSX.Element with <style> elements.
* - 'html': Returns styles as HTML string.
* @returns {string | JSX.Element} The styles for the specified components, formatted as either a string (HTML) or JSX element.
*
* @throws {Error} Throws an error if executed in a browser environment.
*
* @example
* // Get styles as JSX element.
* const jsxStyles: JSX.Element = getSSRStyles(['DSButton', 'DSTabs'], { format: 'jsx' });
*
* @example
* // Get <style> elements as an HTML string.
* const htmlStyles: string = getSSRStyles(['DSButton', 'DSTabs'], { format: 'html' });
*/
export declare function getSSRStyles(componentNames: ComponentName[], options?: GetSSRStylesOptions): string | JSX.Element;
export {};