@dnb/eufemia 10.56.0 → 10.57.1

package/elements/typography/P.js.map

@@ -1 +1 @@
-{"version":3,"file":"P.js","names":["React","createContext","useContext","classnames","E","P","props","modifier","element","className","medium","bold","size","children","rest","_objectWithoutProperties","_excluded","allModifiers","paragraphContext","ParagraphContext","split","forEach","push","modifierString","filter","Boolean","reduce","acc","cur","includes","createElement","Provider","value","isNested","_extends","as","_supportsSpacingProps","undefined"],"sources":["../../../../src/elements/typography/P.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React, { createContext, useContext } from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport type { DynamicElement } from '../../shared/types'\nimport E from '../Element'\n\nexport type PSize =\n  | 'x-small'\n  | 'small'\n  | 'basis'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type PProps = SpacingProps &\n  React.HTMLAttributes<HTMLParagraphElement> & {\n    /**\n     * Defines the Element Type, like \"p\"\n     * Default: p\n     */\n    element?: DynamicElement | 'p'\n    /**\n     * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    medium?: boolean\n    /**\n     * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    bold?: boolean\n    /**\n     * Sets the font size based on size classes defined in paragraphStyle - typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/\n     */\n    size?: PSize\n    /**\n     * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. \"x-small bold\" would make the paragraph extra small and bold.\n     * Works as a flexible alternative to setting the medium, small, bold and size props.\n     * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/\n     */\n    modifier?: string\n  }\n\nfunction P(props: PProps) {\n  const {\n    modifier,\n    element = 'p',\n    className,\n    medium,\n    bold,\n    size,\n    children,\n    ...rest\n  } = props\n\n  const allModifiers = [medium && 'medium', bold && 'bold']\n  const paragraphContext = useContext(ParagraphContext)\n\n  if (modifier) {\n    modifier\n      .split(/\\s/g)\n      .forEach((modifier) => allModifiers.push(modifier))\n  }\n\n  const modifierString = allModifiers\n    .filter(Boolean)\n    .reduce((acc, cur) => {\n      if (['x-small', 'small'].includes(cur)) {\n        return `${acc} dnb-p__size--${cur}`\n      }\n\n      return `${acc} dnb-p--${cur}`\n    }, '')\n\n  return (\n    <ParagraphContext.Provider value={{ isNested: true }}>\n      <E\n        as={\n          element === 'p' && paragraphContext?.isNested ? 'span' : element\n        }\n        {...rest}\n        className={classnames(\n          'dnb-p',\n          modifierString,\n          className,\n          size && `dnb-p__size--${size}`\n        )}\n      >\n        {children}\n      </E>\n    </ParagraphContext.Provider>\n  )\n}\n\nP._supportsSpacingProps = true\n\nexport default P\n\nexport type ParagraphContextType = {\n  isNested?: boolean\n}\n\nexport const ParagraphContext =\n  createContext<ParagraphContextType>(undefined)\n"],"mappings":";;;;;AAKA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AACxD,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,CAAC,MAAM,YAAY;AAsC1B,SAASC,CAACA,CAACC,KAAa,EAAE;EACxB,MAAM;MACJC,QAAQ;MACRC,OAAO,GAAG,GAAG;MACbC,SAAS;MACTC,MAAM;MACNC,IAAI;MACJC,IAAI;MACJC;IAEF,CAAC,GAAGP,KAAK;IADJQ,IAAI,GAAAC,wBAAA,CACLT,KAAK,EAAAU,SAAA;EAET,MAAMC,YAAY,GAAG,CAACP,MAAM,IAAI,QAAQ,EAAEC,IAAI,IAAI,MAAM,CAAC;EACzD,MAAMO,gBAAgB,GAAGhB,UAAU,CAACiB,gBAAgB,CAAC;EAErD,IAAIZ,QAAQ,EAAE;IACZA,QAAQ,CACLa,KAAK,CAAC,KAAK,CAAC,CACZC,OAAO,CAAEd,QAAQ,IAAKU,YAAY,CAACK,IAAI,CAACf,QAAQ,CAAC,CAAC;EACvD;EAEA,MAAMgB,cAAc,GAAGN,YAAY,CAChCO,MAAM,CAACC,OAAO,CAAC,CACfC,MAAM,CAAC,CAACC,GAAG,EAAEC,GAAG,KAAK;IACpB,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAACC,QAAQ,CAACD,GAAG,CAAC,EAAE;MACtC,OAAQ,GAAED,GAAI,iBAAgBC,GAAI,EAAC;IACrC;IAEA,OAAQ,GAAED,GAAI,WAAUC,GAAI,EAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAER,OACE5B,KAAA,CAAA8B,aAAA,CAACX,gBAAgB,CAACY,QAAQ;IAACC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAK;EAAE,GACnDjC,KAAA,CAAA8B,aAAA,CAAC1B,CAAC,EAAA8B,QAAA;IACAC,EAAE,EACA3B,OAAO,KAAK,GAAG,IAAIU,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEe,QAAQ,GAAG,MAAM,GAAGzB;EAC1D,GACGM,IAAI;IACRL,SAAS,EAAEN,UAAU,CACnB,OAAO,EACPoB,cAAc,EACdd,SAAS,EACTG,IAAI,IAAK,gBAAeA,IAAK,EAC/B;EAAE,IAEDC,QACA,CACsB,CAAC;AAEhC;AAEAR,CAAC,CAAC+B,qBAAqB,GAAG,IAAI;AAE9B,eAAe/B,CAAC;AAMhB,OAAO,MAAMc,gBAAgB,GAC3BlB,aAAa,CAAuBoC,SAAS,CAAC"}
+{"version":3,"file":"P.js","names":["React","createContext","useContext","classnames","Typography","P","props","_handleDeprecatedProp","handleDeprecatedProps","remainingModifiers","element","className","rest","_objectWithoutProperties","_excluded","paragraphContext","ParagraphContext","deprecatedModifierString","reduce","acc","cur","createElement","Provider","value","isNested","_extends","_ref","weight","size","modifier","bold","medium","_excluded2","oldWeight","oldSize","allModifiers","split","forEach","push","filter","Boolean","includes","_objectSpread","_supportsSpacingProps","undefined"],"sources":["../../../../src/elements/typography/P.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React, { createContext, useContext } from 'react'\nimport classnames from 'classnames'\nimport Typography, { TypographySize, TypographyProps } from './Typography'\n\n/** @deprecated use TypographySize instead */\nexport type PSize = TypographySize\n\nexport type PProps = TypographyProps<HTMLParagraphElement> & {\n  /**\n   * Tells the component to use the medium font-weight styling dnb-t__weight--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n   * @deprecated use the `weight` prop instead\n   */\n  medium?: boolean\n  /**\n   * Tells the component to use the bold font-weight styling dnb-t__weight--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/\n   * @deprecated use the `weight` prop instead\n   */\n  bold?: boolean\n  /**\n   * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. \"x-small bold\" would make the paragraph extra small and bold.\n   * Works as a flexible alternative to setting the medium, bold and size props.\n   * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/\n   * @deprecated only font weights \"bold\" and \"medium\" and sizes \"x-small\" and \"small\" are supported. Use the `size` and `weight` props instead.\n   */\n  modifier?: string\n}\n\nfunction P(props: PProps) {\n  const {\n    remainingModifiers,\n    element = 'p',\n    className,\n    ...rest\n  } = handleDeprecatedProps(props)\n\n  const paragraphContext = useContext(ParagraphContext)\n\n  const deprecatedModifierString = remainingModifiers.reduce(\n    (acc, cur) => {\n      // This entire string could possibly be deprecated. There are no remaining modifiers\n      // that should be supported, but technically this allows for any class \"dnb-p--[modifier]\".\n      // But \"dnb-p--lead\" is the only class that we have, and it's not supposed to be added here.\n      return `${acc} dnb-p--${cur}`\n    },\n    ''\n  )\n\n  return (\n    <ParagraphContext.Provider value={{ isNested: true }}>\n      <Typography\n        element={\n          element === 'p' && paragraphContext?.isNested ? 'span' : element\n        }\n        className={classnames(\n          'dnb-p',\n          deprecatedModifierString,\n          className\n        )}\n        {...rest}\n      />\n    </ParagraphContext.Provider>\n  )\n}\n\nconst handleDeprecatedProps = ({\n  weight,\n  size,\n  modifier,\n  bold,\n  medium,\n  ...rest\n}: PProps): TypographyProps<HTMLParagraphElement> & {\n  remainingModifiers?: string[]\n} => {\n  let oldWeight\n  let oldSize\n\n  const allModifiers = [bold && 'bold', medium && 'medium']\n  if (modifier) {\n    modifier\n      .split(/\\s/g)\n      .forEach((modifier) => allModifiers.push(modifier))\n  }\n\n  const remainingModifiers = allModifiers.filter(Boolean).filter((cur) => {\n    if (['x-small'].includes(cur)) {\n      oldSize = 'x-small'\n    } else if (['small'].includes(cur)) {\n      oldSize = oldSize || 'small'\n    } else if (['medium'].includes(cur)) {\n      oldWeight = oldWeight || 'medium'\n    } else if (['bold'].includes(cur)) {\n      oldWeight = 'bold'\n    } else {\n      // There should never be anything here unless it's a custom modifier.\n      return true\n    }\n    return false\n  }, [])\n\n  return {\n    weight: weight || oldWeight,\n    size: oldSize && size !== 'x-small' ? oldSize : size,\n    remainingModifiers,\n    ...rest,\n  }\n}\n\nP._supportsSpacingProps = true\n\nexport default P\n\nexport type ParagraphContextType = {\n  isNested?: boolean\n}\n\nexport const ParagraphContext =\n  createContext<ParagraphContextType>(undefined)\n"],"mappings":"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"}

package/elements/typography/PDocs.js

@@ -1,33 +1,22 @@
-export const ParagraphProperties = {
-  element: {
-    doc: 'Defines the Element Type, like `p`.',
-    type: ['HTMLElement', 'string'],
-    status: 'optional'
-  },
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { TypographyProperties } from './TypographyDocs';
+export const ParagraphProperties = _objectSpread(_objectSpread({}, TypographyProperties), {}, {
   medium: {
-    doc: 'Tells the component to use the medium font-weight styling `dnb-p--medium`. More details [here](/uilib/typography/font-weight).',
+    doc: 'Tells the component to use the medium font-weight styling `dnb-t__weight--medium`. More details [here](/uilib/typography/font-weight).',
     type: 'boolean',
-    status: 'optional'
+    status: 'deprecated'
   },
   bold: {
-    doc: 'Tells the component to use the bold font-weight styling class `dnb-p--bold`. More details [here](/uilib/typography/font-weight).',
+    doc: 'Tells the component to use the bold font-weight styling class `dnb-t__weight--bold`. More details [here](/uilib/typography/font-weight).',
     type: 'boolean',
-    status: 'optional'
-  },
-  size: {
-    doc: 'Sets the font size based on the following sizes:  `x-small`, `small`, `basis`, `medium`, `large`, `x-large` or `xx-large`.',
-    type: 'string',
-    status: 'optional'
+    status: 'deprecated'
   },
   modifier: {
-    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small bold` would make the paragraph extra small and bold.',
+    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small medium` would make the paragraph extra small and medium.',
     type: 'string',
-    status: 'optional'
-  },
-  '[Space](/uilib/layout/space/properties)': {
-    doc: 'Spacing properties like `top` or `bottom` are supported.',
-    type: ['string', 'object'],
-    status: 'optional'
+    status: 'deprecated'
   }
-};
+});
 //# sourceMappingURL=PDocs.js.map

package/elements/typography/PDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"PDocs.js","names":["ParagraphProperties","element","doc","type","status","medium","bold","size","modifier"],"sources":["../../../../src/elements/typography/PDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ParagraphProperties: PropertiesTableProps = {\n  element: {\n    doc: 'Defines the Element Type, like `p`.',\n    type: ['HTMLElement', 'string'],\n    status: 'optional',\n  },\n  medium: {\n    doc: 'Tells the component to use the medium font-weight styling `dnb-p--medium`. More details [here](/uilib/typography/font-weight).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  bold: {\n    doc: 'Tells the component to use the bold font-weight styling class `dnb-p--bold`. More details [here](/uilib/typography/font-weight).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  size: {\n    doc: 'Sets the font size based on the following sizes:  `x-small`, `small`, `basis`, `medium`, `large`, `x-large` or `xx-large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  modifier: {\n    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small bold` would make the paragraph extra small and bold.',\n    type: 'string',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAyC,GAAG;EACvDC,OAAO,EAAE;IACPC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,gIAAgI;IACrIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJJ,GAAG,EAAE,kIAAkI;IACvIC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,IAAI,EAAE;IACJL,GAAG,EAAE,4HAA4H;IACjIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,yKAAyK;IAC9KC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"PDocs.js","names":["TypographyProperties","ParagraphProperties","_objectSpread","medium","doc","type","status","bold","modifier"],"sources":["../../../../src/elements/typography/PDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { TypographyProperties } from './TypographyDocs'\n\nexport const ParagraphProperties: PropertiesTableProps = {\n  ...TypographyProperties,\n  medium: {\n    doc: 'Tells the component to use the medium font-weight styling `dnb-t__weight--medium`. More details [here](/uilib/typography/font-weight).',\n    type: 'boolean',\n    status: 'deprecated',\n  },\n  bold: {\n    doc: 'Tells the component to use the bold font-weight styling class `dnb-t__weight--bold`. More details [here](/uilib/typography/font-weight).',\n    type: 'boolean',\n    status: 'deprecated',\n  },\n  modifier: {\n    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small medium` would make the paragraph extra small and medium.',\n    type: 'string',\n    status: 'deprecated',\n  },\n}\n"],"mappings":";;;AACA,SAASA,oBAAoB,QAAQ,kBAAkB;AAEvD,OAAO,MAAMC,mBAAyC,GAAAC,aAAA,CAAAA,aAAA,KACjDF,oBAAoB;EACvBG,MAAM,EAAE;IACNC,GAAG,EAAE,wIAAwI;IAC7IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRJ,GAAG,EAAE,6KAA6K;IAClLC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AAAC,EACF"}

package/elements/typography/Typography.d.ts

@@ -0,0 +1,55 @@
+/**
+ * HTML Element
+ *
+ */
+import React from 'react';
+import { SpacingProps } from '../../components/space/types';
+import type { DynamicElement } from '../../shared/types';
+export type TypographySize = 'x-small' | 'small' | 'basis' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export type TypographyAlign = 'center' | 'left' | 'right';
+export type TypographyFamily = 'basis' | 'heading' | 'monospace';
+export type TypographyWeight = 'regular' | 'medium' | 'bold';
+export type TypographyDecoration = 'underline';
+export type TypographySlant = 'italic';
+export type TypographyProps<ElementType extends HTMLElement = HTMLElement> = SpacingProps & React.HTMLAttributes<ElementType> & {
+    /**
+     * Defines the Element Type, like "p".
+     */
+    element?: DynamicElement;
+    /**
+     * Sets the font size, also sets the line-height if `line` prop is not set
+     */
+    size?: TypographySize;
+    /**
+     * Sets the line height, will use same value as `size` if not set.
+     */
+    lineHeight?: TypographySize;
+    /**
+     * Sets the text alignment
+     */
+    align?: TypographyAlign;
+    /**
+     * Sets the font family
+     */
+    family?: TypographyFamily;
+    /**
+     * Sets the font weight
+     */
+    weight?: TypographyWeight;
+    /**
+     * Sets the font decoration
+     */
+    decoration?: TypographyDecoration;
+    /**
+     * Sets the font style
+     */
+    slant?: TypographySlant;
+};
+type TypographyInternalProps = {
+    innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>;
+};
+declare const Typography: {
+    ({ element, className, size, lineHeight, align, family, weight, decoration, slant, ...props }: TypographyProps & TypographyInternalProps): import("react/jsx-runtime").JSX.Element;
+    _supportsSpacingProps: boolean;
+};
+export default Typography;

package/elements/typography/Typography.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["element", "className", "size", "lineHeight", "align", "family", "weight", "decoration", "slant"];
+import React from 'react';
+import classnames from 'classnames';
+import E from '../Element';
+const Typography = _ref => {
+  let {
+      element = 'p',
+      className,
+      size,
+      lineHeight,
+      align,
+      family,
+      weight,
+      decoration,
+      slant
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return React.createElement(E, _extends({
+    as: element
+  }, props, {
+    className: classnames(className, (lineHeight || size) && `dnb-t__line-height--${lineHeight || size}`, size && `dnb-t__size--${size}`, align && `dnb-t__align--${align}`, family && `dnb-t__family--${family}`, weight && `dnb-t__weight--${weight}`, decoration && `dnb-t__decoration--${decoration}`, slant && `dnb-t__slant--${slant}`)
+  }));
+};
+Typography._supportsSpacingProps = true;
+export default Typography;
+//# sourceMappingURL=Typography.js.map

package/elements/typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","names":["React","classnames","E","Typography","_ref","element","className","size","lineHeight","align","family","weight","decoration","slant","props","_objectWithoutProperties","_excluded","createElement","_extends","as","_supportsSpacingProps"],"sources":["../../../../src/elements/typography/Typography.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { SpacingProps } from '../../components/space/types'\nimport type { DynamicElement } from '../../shared/types'\nimport E from '../Element'\n\nexport type TypographySize =\n  | 'x-small'\n  | 'small'\n  | 'basis'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TypographyAlign = 'center' | 'left' | 'right'\nexport type TypographyFamily = 'basis' | 'heading' | 'monospace'\nexport type TypographyWeight = 'regular' | 'medium' | 'bold'\nexport type TypographyDecoration = 'underline'\nexport type TypographySlant = 'italic'\n\nexport type TypographyProps<\n  ElementType extends HTMLElement = HTMLElement,\n> = SpacingProps &\n  React.HTMLAttributes<ElementType> & {\n    /**\n     * Defines the Element Type, like \"p\".\n     */\n    element?: DynamicElement\n    /**\n     * Sets the font size, also sets the line-height if `line` prop is not set\n     */\n    size?: TypographySize\n    /**\n     * Sets the line height, will use same value as `size` if not set.\n     */\n    lineHeight?: TypographySize\n    /**\n     * Sets the text alignment\n     */\n    align?: TypographyAlign\n    /**\n     * Sets the font family\n     */\n    family?: TypographyFamily\n    /**\n     * Sets the font weight\n     */\n    weight?: TypographyWeight\n    /**\n     * Sets the font decoration\n     */\n    decoration?: TypographyDecoration\n    /**\n     * Sets the font style\n     */\n    slant?: TypographySlant\n  }\n\ntype TypographyInternalProps = {\n  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>\n}\n\nconst Typography = ({\n  element = 'p',\n  className,\n  size,\n  lineHeight,\n  align,\n  family,\n  weight,\n  decoration,\n  slant,\n  ...props\n}: TypographyProps & TypographyInternalProps) => {\n  return (\n    <E\n      as={element}\n      {...props}\n      className={classnames(\n        className,\n        size && `dnb-t__size--${size}`,\n        align && `dnb-t__align--${align}`,\n        family && `dnb-t__family--${family}`,\n        weight && `dnb-t__weight--${weight}`,\n        decoration && `dnb-t__decoration--${decoration}`,\n        slant && `dnb-t__slant--${slant}`,\n        (lineHeight || size) && `dnb-t__line-height--${lineHeight || size}`\n      )}\n    />\n  )\n}\n\nTypography._supportsSpacingProps = true\n\nexport default Typography\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAGnC,OAAOC,CAAC,MAAM,YAAY;AA2D1B,MAAMC,UAAU,GAAGC,IAAA,IAW8B;EAAA,IAX7B;MAClBC,OAAO,GAAG,GAAG;MACbC,SAAS;MACTC,IAAI;MACJC,UAAU;MACVC,KAAK;MACLC,MAAM;MACNC,MAAM;MACNC,UAAU;MACVC;IAEyC,CAAC,GAAAT,IAAA;IADvCU,KAAK,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAER,OACEhB,KAAA,CAAAiB,aAAA,CAACf,CAAC,EAAAgB,QAAA;IACAC,EAAE,EAAEd;EAAQ,GACRS,KAAK;IACTR,SAAS,EAAEL,UAAU,CACnBK,SAAS,EAOT,CAACE,UAAU,IAAID,IAAI,KAAM,uBAAsBC,UAAU,IAAID,IAAK,EAAC,EANnEA,IAAI,IAAK,gBAAeA,IAAK,EAAC,EAC9BE,KAAK,IAAK,iBAAgBA,KAAM,EAAC,EACjCC,MAAM,IAAK,kBAAiBA,MAAO,EAAC,EACpCC,MAAM,IAAK,kBAAiBA,MAAO,EAAC,EACpCC,UAAU,IAAK,sBAAqBA,UAAW,EAAC,EAChDC,KAAK,IAAK,iBAAgBA,KAAM,EAElC;EAAE,EACH,CAAC;AAEN,CAAC;AAEDV,UAAU,CAACiB,qBAAqB,GAAG,IAAI;AAEvC,eAAejB,UAAU"}

package/elements/typography/TypographyDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const TypographyProperties: PropertiesTableProps;

package/elements/typography/TypographyDocs.js

@@ -0,0 +1,48 @@
+export const TypographyProperties = {
+  element: {
+    doc: 'Defines the Element Type, like `p`.',
+    type: ['HTMLElement', 'string'],
+    status: 'optional'
+  },
+  size: {
+    doc: 'Sets the font size, also sets the line-height if `lineHeight` prop is not set.',
+    type: [`'x-small'`, `'small'`, `'basis'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`],
+    status: 'optional'
+  },
+  lineHeight: {
+    doc: 'Sets the line height, will use same value as `size` if not set.',
+    type: [`'x-small'`, `'small'`, `'basis'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`],
+    status: 'optional'
+  },
+  align: {
+    doc: 'Sets the text alignment.',
+    type: [`'center'`, `'left'`, `'right'`],
+    status: 'optional'
+  },
+  family: {
+    doc: 'Sets the font family.',
+    type: [`'basis'`, `'heading'`, `'monospace'`],
+    status: 'optional'
+  },
+  weight: {
+    doc: 'Sets the font weight.',
+    type: [`'regular'`, `'medium'`],
+    status: 'optional'
+  },
+  decoration: {
+    doc: 'Sets the font decoration.',
+    type: `'underline'`,
+    status: 'optional'
+  },
+  slant: {
+    doc: 'Sets the font style.',
+    type: `'italic'`,
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=TypographyDocs.js.map

package/elements/typography/TypographyDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypographyDocs.js","names":["TypographyProperties","element","doc","type","status","size","lineHeight","align","family","weight","decoration","slant"],"sources":["../../../../src/elements/typography/TypographyDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const TypographyProperties: PropertiesTableProps = {\n  element: {\n    doc: 'Defines the Element Type, like `p`.',\n    type: ['HTMLElement', 'string'],\n    status: 'optional',\n  },\n  size: {\n    doc: 'Sets the font size, also sets the line-height if `lineHeight` prop is not set.',\n    type: [\n      `'x-small'`,\n      `'small'`,\n      `'basis'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n    ],\n    status: 'optional',\n  },\n  lineHeight: {\n    doc: 'Sets the line height, will use same value as `size` if not set.',\n    type: [\n      `'x-small'`,\n      `'small'`,\n      `'basis'`,\n      `'medium'`,\n      `'large'`,\n      `'x-large'`,\n      `'xx-large'`,\n    ],\n    status: 'optional',\n  },\n  align: {\n    doc: 'Sets the text alignment.',\n    type: [`'center'`, `'left'`, `'right'`],\n    status: 'optional',\n  },\n  family: {\n    doc: 'Sets the font family.',\n    type: [`'basis'`, `'heading'`, `'monospace'`],\n    status: 'optional',\n  },\n  weight: {\n    doc: 'Sets the font weight.',\n    type: [`'regular'`, `'medium'`],\n    status: 'optional',\n  },\n  decoration: {\n    doc: 'Sets the font decoration.',\n    type: `'underline'`,\n    status: 'optional',\n  },\n  slant: {\n    doc: 'Sets the font style.',\n    type: `'italic'`,\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,OAAO,EAAE;IACPC,GAAG,EAAE,qCAAqC;IAC1CC,IAAI,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,CACH,WAAU,EACV,SAAQ,EACR,SAAQ,EACR,UAAS,EACT,SAAQ,EACR,WAAU,EACV,YAAW,CACb;IACDC,MAAM,EAAE;EACV,CAAC;EACDE,UAAU,EAAE;IACVJ,GAAG,EAAE,iEAAiE;IACtEC,IAAI,EAAE,CACH,WAAU,EACV,SAAQ,EACR,SAAQ,EACR,UAAS,EACT,SAAQ,EACR,WAAU,EACV,YAAW,CACb;IACDC,MAAM,EAAE;EACV,CAAC;EACDG,KAAK,EAAE;IACLL,GAAG,EAAE,0BAA0B;IAC/BC,IAAI,EAAE,CAAE,UAAS,EAAG,QAAO,EAAG,SAAQ,CAAC;IACvCC,MAAM,EAAE;EACV,CAAC;EACDI,MAAM,EAAE;IACNN,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,SAAQ,EAAG,WAAU,EAAG,aAAY,CAAC;IAC7CC,MAAM,EAAE;EACV,CAAC;EACDK,MAAM,EAAE;IACNP,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,WAAU,EAAG,UAAS,CAAC;IAC/BC,MAAM,EAAE;EACV,CAAC;EACDM,UAAU,EAAE;IACVR,GAAG,EAAE,2BAA2B;IAChCC,IAAI,EAAG,aAAY;IACnBC,MAAM,EAAE;EACV,CAAC;EACDO,KAAK,EAAE;IACLT,GAAG,EAAE,sBAAsB;IAC3BC,IAAI,EAAG,UAAS;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

package/elements/typography/style/_dnb-t.scss

@@ -0,0 +1,93 @@
+/*
+ * Typography
+ * Universal set of helper classes that do not have a specific element. 
+ * The class ".dnb-t" does nothing, only it's modifiers ".dnb-t__[***]" do.
+ */
+.dnb-t {
+  // size
+  &__size--xx-large {
+    font-size: var(--font-size-xx-large);
+  }
+  &__size--x-large {
+    font-size: var(--font-size-x-large);
+  }
+  &__size--large {
+    font-size: var(--font-size-large);
+  }
+  &__size--medium {
+    font-size: var(--font-size-medium);
+  }
+  &__size--basis {
+    font-size: var(--font-size-basis);
+  }
+  &__size--small {
+    font-size: var(--font-size-small);
+  }
+  &__size--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  // line height
+  &__line-height--xx-large {
+    line-height: var(--line-height-xx-large);
+  }
+  &__line-height--x-large {
+    line-height: var(--line-height-x-large);
+  }
+  &__line-height--large {
+    line-height: var(--line-height-large);
+  }
+  &__line-height--medium {
+    line-height: var(--line-height-medium);
+  }
+  &__line-height--basis {
+    line-height: var(--line-height-basis);
+  }
+  &__line-height--small {
+    line-height: var(--line-height-small);
+  }
+  &__line-height--x-small {
+    line-height: var(--line-height-x-small);
+  }
+
+  // weight
+  &__weight--regular {
+    font-weight: var(--font-weight-regular);
+  }
+  &__weight--medium {
+    font-weight: var(--font-weight-medium);
+  }
+  &__weight--bold {
+    font-weight: var(--font-weight-bold);
+  }
+
+  // alignement
+  &__align--center {
+    text-align: center;
+  }
+  &__align--left {
+    text-align: left;
+  }
+  &__align--right {
+    text-align: right;
+  }
+
+  // family
+  &__family--default {
+    font-family: var(--font-family-default);
+  }
+  &__family--heading {
+    font-family: var(--font-family-heading);
+  }
+  &__family--monospace {
+    font-family: var(--font-family-monospace);
+  }
+
+  // underline / italic
+  &__decoration--underline {
+    text-decoration: underline;
+  }
+  &__slant--italic {
+    font-style: italic;
+  }
+}

package/elements/typography/style/dnb-typography.scss

@@ -7,7 +7,6 @@
 @import './typography-mixins.scss';
 
 @include typographySelectors() {
-  --typography-h-default-font-family: var(--font-family-default);
   --typography-h-default-font-weight: var(--font-weight-medium);
 
   // Heading xx-large
@@ -94,6 +93,8 @@ sub {
   @include paragraphStyle();
 }
 
+@import './dnb-t.scss';
+
 // Tables
 .dnb-table {
   b,

package/elements/typography/style/themes/dnb-typography-theme-sbanken.scss

@@ -18,7 +18,6 @@
 }
 
 @include typography.typographySelectors() {
-  --typography-h-default-font-family: var(--sb-font-family-headings);
   --typography-h-xx-large-weight: var(--font-weight-regular);
   --typography-h-x-large-weight: var(--font-weight-regular);
   --typography-h-large-small-font-size: var(--sb-font-size-medium--plus);

package/elements/typography/style/typography-mixins.scss

@@ -96,7 +96,7 @@
     margin: 0;
   }
 
-  font-family: var(--typography-h-default-font-family);
+  font-family: var(--font-family-heading);
 
   // make icons inside heading responsive to the heading size
   .dnb-icon--default {
@@ -240,13 +240,29 @@
   &--lead {
     @include typography_lead();
   }
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+  // is still needed for backwards compatibility when ".dnp-p" was used for all typography
+  @include paragraphDeprecated();
 
-  &--medium {
+  & > small {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
+
+  & > cite {
     font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-basis);
+    font-style: italic;
   }
+}
 
-  b,
-  strong {
+// should use the .dnb-t classes instead
+@mixin paragraphDeprecated() {
+  // weights
+  &--medium {
     font-weight: var(--font-weight-medium);
   }
 
@@ -254,6 +270,7 @@
     font-weight: var(--font-weight-bold);
   }
 
+  // sizes and line-heights
   &__size--xx-large {
     font-size: var(--font-size-xx-large);
     line-height: var(--line-height-xx-large);
@@ -279,24 +296,17 @@
     line-height: var(--line-height-medium);
   }
 
-  &--small ,// backwards compatibility
-   &__size--small,
-   & > small {
+  &--small, // backwards compatibility
+  &__size--small {
     font-size: var(--font-size-small);
     line-height: var(--line-height-small);
   }
 
-  &--x-small ,// backwards compatibility
-   &__size--x-small {
+  &--x-small, // backwards compatibility
+  &__size--x-small {
     font-size: var(--font-size-x-small);
     line-height: var(--line-height-x-small);
   }
-
-  & > cite {
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-basis);
-    font-style: italic;
-  }
 }
 
 @mixin headingSpacing_xx-large() {