@vodafone_de/brix-components 7.0.6 → 7.0.8

package/dist/components/MediaText/index.js

@@ -1,121 +0,0 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import Flex from "../Flex/index.js";
-import FlexItem from "../FlexItem/index.js";
-import Heading, { headingAlignLeft } from "../Heading/index.js";
-import Image, { aspectRatio16_9 } from "../Image/index.js";
-import Link from "../Link/index.js";
-import { g as getUid, R as RichText } from "../../index-BRs8j3Vq.js";
-import YoutubeVideo from "../YoutubeVideo/index.js";
-import { u as ulTagName, d as divTagName, l as liTagName } from "../../tags-DI6H1biK.js";
-import { a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
-import { b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
-import { s as spacingMd, e as spacing2Xs, c as spacingSm, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { u as useViewport } from "../../index-Cs0Hw0dj.js";
-import styled from "styled-components";
-import { v as viewport } from "../../index-Ck2bCrhT.js";
-import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
-import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-B0YKfXTz.js";
-const mediaTextOrientationTop = "top";
-const mediaTextOrientationLeft = "left";
-const mediaTextOrientationRight = "right";
-const MediaTextStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "MediaTextStyled",
-  componentId: "sc-zs2pry-0"
-})(({
-  orientation,
-  bottomSpacing = spacingMd
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  ...viewport.md({
-    flexDirection: orientation === "top" ? "column" : orientation === "left" ? "row" : "row-reverse"
-  }),
-  ...getBottomSpacing({
-    bottomSpacing
-  })
-}));
-const MediaTextMediaStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "MediaTextMediaStyled",
-  componentId: "sc-zs2pry-1"
-})(({
-  orientation,
-  bottomSpacing = spacingMd
-}) => ({
-  flex: 1,
-  ...getBottomSpacing({
-    bottomSpacing
-  }),
-  ...viewport.md({
-    ...orientation != mediaTextOrientationTop ? {
-      marginBottom: 0
-    } : {}
-  })
-}));
-const MediaTextContentStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps(),
-  displayName: "MediaTextContentStyled",
-  componentId: "sc-zs2pry-2"
-})(({
-  orientation
-}) => ({
-  flex: 1,
-  ...viewport.md({
-    ...orientation === "left" && {
-      paddingLeft: getSpacing(spacingMd)
-    },
-    ...orientation === "right" && {
-      paddingRight: getSpacing(spacingMd)
-    }
-  })
-}));
-const MediaText = ({
-  media,
-  orientation = mediaTextOrientationLeft,
-  heading,
-  subline,
-  richText,
-  action,
-  ...props
-}) => {
-  const headingId = `heading-${getUid()}`;
-  const sublineId = `subline-${getUid()}`;
-  const viewport2 = useViewport();
-  const headingSpacing = subline ? spacing2Xs : spacingMd;
-  const hasMultipleActions = Array.isArray(action) && action.length > 1;
-  const actionFlexAs = hasMultipleActions ? ulTagName : divTagName;
-  const linkFlexItemAs = hasMultipleActions ? liTagName : divTagName;
-  const renderMedia = (media2) => {
-    if (!media2) return null;
-    switch (media2.component) {
-      case "Image":
-        return /* @__PURE__ */ jsx(Image, { ...media2, aspectRatio: aspectRatio16_9, bottomSpacing: spacingNone });
-      case "YoutubeVideo":
-        return /* @__PURE__ */ jsx(YoutubeVideo, { ...media2, bottomSpacing: spacingNone });
-      default:
-        console.warn(`Unsupported media component: ${media2.component}`);
-        return null;
-    }
-  };
-  const mediaContent = useMemo(() => renderMedia(media), [media]);
-  return /* @__PURE__ */ jsxs(MediaTextStyled, { orientation, ...props, children: [
-    /* @__PURE__ */ jsx(MediaTextMediaStyled, { orientation, children: mediaContent }),
-    /* @__PURE__ */ jsxs(MediaTextContentStyled, { orientation, children: [
-      /* @__PURE__ */ jsx(Heading, { ...heading, id: headingId, align: headingAlignLeft, size: textHeadingSm, bottomSpacing: headingSpacing }),
-      subline && /* @__PURE__ */ jsx(Heading, { ...subline, id: sublineId, align: headingAlignLeft, size: textHeadingXs, weight: fontWeightRegular, bottomSpacing: spacingMd }),
-      /* @__PURE__ */ jsx(RichText, { ...richText, bottomSpacing: spacingMd }),
-      /* @__PURE__ */ jsx(Flex, { bottomSpacing: spacingMd, gapSpacing: spacingSm, justify: flexJustifyStart, orientation: "sm" === viewport2 ? flexOrientationVertical : flexOrientationHorizontal, as: actionFlexAs, children: action && action.map((action2) => /* @__PURE__ */ jsx(FlexItem, { as: linkFlexItemAs, bottomSpacing: spacingNone, children: /* @__PURE__ */ jsx(Link, { ...action2 }) }, action2.uid)) })
-    ] })
-  ] });
-};
-export {
-  MediaText as default,
-  mediaTextOrientationLeft,
-  mediaTextOrientationRight,
-  mediaTextOrientationTop
-};

package/dist/components/MediaText/props.d.ts

@@ -1,42 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { HeadingProps } from '../Heading/props';
-import { ImageProps } from '../Image';
-import { LinkProps } from '../Link';
-import { RichTextProps } from '../RichText';
-import { YoutubeVideoProps } from '../YoutubeVideo';
-import { PatternProps } from '../../foundations/PatternProps';
-export declare const mediaTextOrientationTop = "top";
-export declare const mediaTextOrientationLeft = "left";
-export declare const mediaTextOrientationRight = "right";
-export type MediaTextOrientation = typeof mediaTextOrientationTop | typeof mediaTextOrientationLeft | typeof mediaTextOrientationRight;
-export interface MediaTextProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
-    /**
-     * Pin component's name from string to the concrete name
-     */
-    component?: 'MediaText';
-    /**
-     * media prop can be either an Image or a YoutubeVideo
-     * The aspect ratio is always 16 to 1. This must be taken into account when selecting the asset.
-     */
-    media: Omit<ImageProps, 'bottomSpacing'> | Omit<YoutubeVideoProps, 'bottomSpacing'>;
-    /**
-     * MediaText media can be orientated top, left or right.
-     */
-    orientation?: MediaTextOrientation;
-    /**
-     * Heading
-     */
-    heading: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
-    /**
-     * Subline
-     */
-    subline?: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
-    /**
-     * Body
-     */
-    richText: Omit<RichTextProps, 'bottomSpacing'>;
-    /**
-     * Action, list of links
-     */
-    action?: LinkProps[];
-}

package/dist/components/MediaText/styled.d.ts

@@ -1,4 +0,0 @@
-import { MediaTextProps } from './props';
-export declare const MediaTextStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation" | "bottomSpacing">>> & string;
-export declare const MediaTextMediaStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation" | "bottomSpacing">>> & string;
-export declare const MediaTextContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<MediaTextProps, "orientation">>> & string;

package/dist/components/Rating/assets/StarSVG.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-declare const StarSVG: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<React.SVGProps<SVGSVGElement>, never>> & string & Omit<(props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
-export default StarSVG;

package/dist/components/Rating/index.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-import { RatingProps } from './props';
-declare const Rating: FC<RatingProps>;
-export default Rating;
-export * from './props';
-export * from './styled';

package/dist/components/Rating/index.js

@@ -1,153 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
-import Fieldset from "../Fieldset/index.js";
-import styled from "styled-components";
-import { u as useViewport, v as viewportSm } from "../../index-Cs0Hw0dj.js";
-import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
-import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
-import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
-import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
-import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
-import { c as colorBorderFocus, i as colorBorderSelected, a as colorBorderNeutral, b as colorBorderUnselected } from "../../BorderColor-BummoQ1-.js";
-import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
-import { b as colorObjectSelected } from "../../ObjectColor-BZDBuV8H.js";
-import { a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
-const StarSVGBase = (props) => {
-  const viewport = useViewport();
-  let width = 32;
-  let height = 30.624;
-  if (viewport === viewportSm) {
-    width = 24;
-    height = 22.968;
-  }
-  return /* @__PURE__ */ jsx("svg", { style: {
-    display: "inline-block"
-  }, width, height, viewBox: "0 0 26 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 9.95223L9.26911 8.58599L12.8296 1L16.6847 8.44108L25 9.48408L19.1147 15.449L20.6911 23.6799L13.199 19.9252L5.85987 23.9682L7.11465 15.6831L1 9.95223Z", fill: "white", stroke: "#7E7E7E", strokeLinecap: "round", strokeLinejoin: "round" }) });
-};
-const StarSVG = styled(StarSVGBase).withConfig({
-  displayName: "StarSVG",
-  componentId: "sc-iheyat-0"
-})([""]);
-const getSvgPathStyles = (props) => ({
-  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
-  strokeWidth: "1px",
-  stroke: props.selected ? getBorderColor(colorBorderSelected) : props.isInHoverRange ? getBorderColor(colorBorderNeutral) : getBorderColor(colorBorderUnselected)
-});
-const getHoverSvgPathStyles = (props) => ({
-  fill: props.selected ? getHoverColor(colorObjectSelected) : getHoverColor(colorBackgroundNeutral),
-  strokeWidth: "1px",
-  stroke: props.selected ? getBorderColor(colorBorderSelected) : getBorderColor(colorBorderNeutral)
-});
-const StarsWrapperStyled = styled.div.withConfig({
-  displayName: "StarsWrapperStyled",
-  componentId: "sc-1nbg0l6-0"
-})({
-  display: "flex",
-  gap: getSpacing(spacingXs)
-});
-const StarLabelStyled = styled.label.withConfig({
-  displayName: "StarLabelStyled",
-  componentId: "sc-1nbg0l6-1"
-})(({
-  selected,
-  isInHoverRange
-}) => {
-  const normalStyles = getSvgPathStyles({
-    selected,
-    isInHoverRange
-  });
-  const hoverStyles = getHoverSvgPathStyles({
-    selected
-  });
-  return {
-    cursor: "pointer",
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    svg: {
-      path: {
-        ...normalStyles,
-        transition: "fill 200ms, stroke 200ms"
-      }
-    },
-    "&:hover svg path": {
-      ...hoverStyles,
-      transition: "fill 200ms, stroke 200ms"
-    },
-    // Apply focus-visible styles on label when input is focused
-    "&:has(:focus-visible)": {
-      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
-      outlineOffset: "2px"
-    }
-  };
-});
-const HiddenRadioStyled = styled.input.withConfig({
-  displayName: "HiddenRadioStyled",
-  componentId: "sc-1nbg0l6-2"
-})({
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  whiteSpace: "nowrap",
-  width: "1px"
-});
-const Rating = ({
-  value,
-  onUpdate,
-  className,
-  groupName,
-  uid,
-  component: _component,
-  ...props
-}) => {
-  const [internalValue, setInternalValue] = useState(value ?? 0);
-  const [hoverValue, setHoverValue] = useState(null);
-  useEffect(() => {
-    if (value !== void 0) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const handleChange = (event) => {
-    const newValue = Number(event.target.value);
-    setInternalValue(newValue);
-    if (onUpdate) {
-      onUpdate(newValue);
-    }
-  };
-  const handleMouseEnter = (index) => {
-    setHoverValue(index + 1);
-  };
-  const handleMouseLeave = () => {
-    setHoverValue(null);
-  };
-  const handleClick = (starValue) => {
-    if (starValue === internalValue) {
-      setInternalValue(0);
-      if (onUpdate) {
-        onUpdate(0);
-      }
-    }
-  };
-  const ref = useRef(null);
-  return /* @__PURE__ */ jsx(Fieldset, { ...props, uid, ref, children: /* @__PURE__ */ jsx(StarsWrapperStyled, { className, role: "radiogroup", children: [...Array(5)].map((_, index) => {
-    const starValue = index + 1;
-    const isInHoverRange = hoverValue !== null && starValue <= hoverValue;
-    return /* @__PURE__ */ jsxs(StarLabelStyled, { selected: starValue <= internalValue, isInHoverRange, htmlFor: `${uid}-star-${starValue}`, onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, "aria-label": `${starValue} von 5 Sternen`, children: [
-      /* @__PURE__ */ jsx(HiddenRadioStyled, { type: "radio", id: `${uid}-star-${starValue}`, name: groupName || uid, value: starValue, checked: starValue === internalValue, onChange: handleChange, onClick: () => handleClick(starValue) }),
-      /* @__PURE__ */ jsx(StarSVG, {})
-    ] }, `star-${starValue}-${uid}`);
-  }) }) });
-};
-export {
-  HiddenRadioStyled,
-  StarLabelStyled,
-  StarsWrapperStyled,
-  Rating as default
-};

package/dist/components/Rating/props.d.ts

@@ -1,22 +0,0 @@
-import { FieldsetSharedProps } from '../Fieldset';
-/**
- * Props for the Rating component
- */
-export interface RatingProps extends Omit<FieldsetSharedProps, 'status' | 'errorMessage' | 'disabled' | 'helperText'> {
-    /**
-     * The current rating value (number of stars selected)
-     */
-    value?: number;
-    /**
-     * Callback fired when the rating value changes
-     */
-    onUpdate?: (value: number) => void;
-    /**
-     * Optional group name to identify the rating group for accessibility
-     */
-    groupName?: string;
-    /**
-     * Pin component's name from string to the concrete name
-     */
-    component?: 'Rating';
-}

package/dist/components/Rating/styled.d.ts

@@ -1,6 +0,0 @@
-export declare const StarsWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StarLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-    selected: boolean;
-    isInHoverRange?: boolean;
-}>> & string;
-export declare const HiddenRadioStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/index-Cs0Hw0dj.js

@@ -1,25 +0,0 @@
-import { useState, useEffect } from "react";
-import { l as largeMediaQuery, m as mediumMediaQuery } from "./index-Ck2bCrhT.js";
-import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
-const viewportSm = "sm";
-const viewportMd = "md";
-const viewportLg = "lg";
-const useViewport = () => {
-  const tablet = useMediaQuery(mediumMediaQuery);
-  const desktop = useMediaQuery(largeMediaQuery);
-  const [viewportState, setViewportState] = useState(viewportSm);
-  useEffect(() => {
-    if (desktop) {
-      setViewportState(viewportLg);
-    } else if (tablet) {
-      setViewportState(viewportMd);
-    } else {
-      setViewportState(viewportSm);
-    }
-  }, [tablet, desktop]);
-  return viewportState;
-};
-export {
-  useViewport as u,
-  viewportSm as v
-};