@norges-domstoler/dds-components 5.4.0 → 5.5.0

package/dist/components/Typography/Typography.js

@@ -1,172 +0,0 @@
-import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { textColorsArray, textColors, typographyTokens } from './Typography.tokens.js';
-import { Icon } from '../Icon/Icon.js';
-import { focusVisibleLinkTransitionValue } from '../../helpers/styling/focusVisible.js';
-import { OpenExternalIcon } from '../../icons/tsx/openExternal.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
-
-var getElementType = function getElementType(element) {
-  switch (element) {
-    case 'a':
-      return 'a';
-
-    case 'headingSans01':
-      return 'h6';
-
-    case 'headingSans02':
-      return 'h5';
-
-    case 'headingSans03':
-      return 'h4';
-
-    case 'headingSans04':
-      return 'h3';
-
-    case 'headingSans05':
-      return 'h2';
-
-    case 'headingSans06':
-    case 'headingSans07':
-    case 'headingSans08':
-      return 'h1';
-
-    case 'supportingStyleLabel01':
-      return 'label';
-
-    case 'bodySans01':
-    case 'bodySans02':
-    case 'bodySans03':
-    case 'bodySans04':
-    case 'bodySerif01':
-    case 'bodySerif02':
-    case 'bodySerif03':
-    case 'bodySerif04':
-    case 'leadSans01':
-    case 'leadSans02':
-    case 'leadSans03':
-    case 'leadSans04':
-    case 'leadSans05':
-    case 'supportingStyleInputText01':
-    case 'supportingStyleInputText02':
-    case 'supportingStyleInputText03':
-    case 'supportingStyleHelperText01':
-    case 'supportingStylePlaceholderText01':
-    case 'supportingStyleTiny01':
-    case 'supportingStyleTiny02':
-    default:
-      return 'p';
-  }
-};
-
-var inlineElements = ['a', 'abbr', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button', 'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress', 'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var', 'video', 'wbr'];
-
-var isInlineElement = function isInlineElement(as) {
-  return inlineElements.indexOf(as) !== -1;
-};
-
-function isTextColor(color) {
-  return textColorsArray.indexOf(color) !== -1;
-}
-var getTextColor = function getTextColor(color) {
-  if (isTextColor(color)) return textColors[color];
-  return color;
-};
-
-var getElementStyling = function getElementStyling(type) {
-  return css(["", " &::selection,*::selection{", "}"], typographyTokens.typographyType[type].base, typographyTokens.selection.base);
-};
-
-var LinkIcon = styled(Icon).withConfig({
-  displayName: "Typography__LinkIcon",
-  componentId: "sc-1uvxoh6-0"
-})(["", ""], typographyTokens.typographyType.a.icon);
-var StyledTypography = styled.p.withConfig({
-  displayName: "Typography__StyledTypography",
-  componentId: "sc-1uvxoh6-1"
-})(["", " ", " ", " ", " ", " ", " ", " ", " ", ""], function (_ref) {
-  var typographyType = _ref.typographyType;
-  return typographyType && getElementStyling(typographyType);
-}, function (_ref2) {
-  var typographyType = _ref2.typographyType,
-      interactionProps = _ref2.interactionProps;
-  return typographyType === 'a' && css(["display:inline-flex;align-items:center;@media (prefers-reduced-motion:no-preference){transition:", ";}&:hover{", "}", " &:focus-visible,&.focus-visible{", "}&:focus-visible::selection &.focus-visible::selection{", "}"], focusVisibleLinkTransitionValue, typographyTokens.typographyType[typographyType].hover.base, interactionProps && interactionProps.active && css(["&:active{", "}"], interactionProps.active), typographyTokens.typographyType[typographyType].focus.base, typographyTokens.typographyType[typographyType].focus.base);
-}, function (_ref3) {
-  var interactionProps = _ref3.interactionProps;
-  return interactionProps && interactionProps.hover && css(["&:hover{", "}"], interactionProps.hover);
-}, function (_ref4) {
-  var interactionProps = _ref4.interactionProps;
-  return interactionProps && interactionProps.active && css(["&:active{", "}"], interactionProps.active);
-}, function (_ref5) {
-  var withMargins = _ref5.withMargins,
-      typographyType = _ref5.typographyType,
-      as = _ref5.as;
-  return withMargins && typographyType && isInlineElement(as) ? css(["", " display:block;"], typographyTokens.typographyType[typographyType].margins.base) : withMargins && typographyType ? css(["", ""], typographyTokens.typographyType[typographyType].margins.base) : css(["margin:0;"]);
-}, function (_ref6) {
-  var color = _ref6.color;
-  return color && css(["color:", ";"], getTextColor(color));
-}, function (_ref7) {
-  var bold = _ref7.bold;
-  return bold && css(["", ""], typographyTokens.style.bold.base);
-}, function (_ref8) {
-  var italic = _ref8.italic;
-  return italic && css(["", ""], typographyTokens.style.italic.base);
-}, function (_ref9) {
-  var underline = _ref9.underline;
-  return underline && css(["", ""], typographyTokens.style.underline.base);
-});
-
-var isAnchorProps = function isAnchorProps(props) {
-  return props.typographyType === 'a';
-};
-
-var Typography = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _a;
-
-  var _props$typographyType = props.typographyType,
-      typographyType = _props$typographyType === void 0 ? 'bodySans02' : _props$typographyType,
-      propAs = props.as,
-      children = props.children,
-      style = props.style,
-      id = props.id,
-      className = props.className,
-      _props$htmlProps = props.htmlProps,
-      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
-      rest = __rest(props, ["typographyType", "as", "children", "style", "id", "className", "htmlProps"]);
-
-  var htmlPropsStyle = htmlProps.style,
-      restHtmlProps = __rest(htmlProps, ["style"]);
-
-  var as = propAs ? propAs : getElementType(typographyType);
-  var relProp;
-  var targetProp;
-  var renderIcon = false;
-
-  if (isAnchorProps(props)) {
-    var externalLink = props.externalLink,
-        target = props.target;
-    renderIcon = (_a = as === 'a' && externalLink) !== null && _a !== void 0 ? _a : false;
-    relProp = as === 'a' ? 'noopener noreferer' : undefined;
-    targetProp = as !== 'a' ? undefined : externalLink ? '_blank' : target;
-  }
-
-  var typographyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, restHtmlProps, rest)), {
-    typographyType: typographyType,
-    as: as,
-    style: Object.assign(Object.assign({}, htmlPropsStyle), style),
-    rel: relProp,
-    target: targetProp
-  });
-  return jsxs(StyledTypography, Object.assign({
-    ref: ref
-  }, typographyProps, {
-    children: [children, renderIcon && jsx(LinkIcon, {
-      icon: OpenExternalIcon,
-      iconSize: "inherit"
-    })]
-  }));
-});
-
-export { Typography, getTextColor, inlineElements, isTextColor };

package/dist/components/Typography/Typography.types.d.ts

@@ -1,13 +0,0 @@
-declare type TypographyBodySansType = 'bodySans01' | 'bodySans02' | 'bodySans03' | 'bodySans04';
-declare type TypographyBodySerifType = 'bodySerif01' | 'bodySerif02' | 'bodySerif03' | 'bodySerif04';
-export declare type TypographyBodyType = TypographyBodySansType | TypographyBodySerifType;
-declare type TypographyHeadingType = 'headingSans01' | 'headingSans02' | 'headingSans03' | 'headingSans04' | 'headingSans05' | 'headingSans06' | 'headingSans07' | 'headingSans08';
-declare type TypographyLeadType = 'leadSans01' | 'leadSans02' | 'leadSans03' | 'leadSans04' | 'leadSans05';
-declare type TypographySupportingType = 'supportingStyleInputText01' | 'supportingStyleInputText02' | 'supportingStyleInputText03' | 'supportingStyleHelperText01' | 'supportingStylePlaceholderText01' | 'supportingStyleTiny01' | 'supportingStyleTiny02';
-export declare type AnchorTypographyType = 'a';
-export declare type LabelTypographyType = 'supportingStyleLabel01';
-export declare type OtherTypographyType = TypographyHeadingType | TypographyBodyType | TypographyLeadType | TypographySupportingType;
-export declare type TypographyType = AnchorTypographyType | LabelTypographyType | OtherTypographyType;
-export declare type TextColor = 'interactive' | 'primary' | 'danger' | 'warning' | 'success' | 'onLight' | 'onDark' | 'gray1' | 'gray2' | 'gray3' | 'gray4' | 'gray5' | 'gray6' | 'gray7' | 'gray8' | 'gray9';
-export declare type InlineElement = 'a' | 'abbr' | 'audio' | 'b' | 'bdi' | 'bdo' | 'big' | 'br' | 'button' | 'canvas' | 'cite' | 'code' | 'data' | 'datalist' | 'del' | 'dfn' | 'em' | 'embed' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'map' | 'mark' | 'meter' | 'noscript' | 'object' | 'output' | 'picture' | 'progress' | 'q' | 'ruby' | 's' | 'samp' | 'script' | 'select' | 'slot' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'svg' | 'template' | 'textarea' | 'time' | 'u' | 'var' | 'video' | 'wbr';
-export {};