@contentful/f36-typography
Advanced tools
Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438
170
dist/main.js
@@ -1,2 +0,170 @@ | ||
var e=c(require("@babel/runtime/helpers/extends")),t=require("react"),n=c(t),{useEffect:i}=t,{cx:r,css:o}=require("emotion"),a=c(require("@contentful/f36-tokens")),{Box:l}=require("@contentful/f36-core");function f(e,t,n,i){Object.defineProperty(e,t,{get:n,set:i,enumerable:!0,configurable:!0})}function c(e){return e&&e.__esModule?e.default:e}var s={};f(s,"Heading",(()=>u)),f(s,"Subheading",(()=>p)),f(s,"Typography",(()=>S)),f(s,"DisplayText",(()=>H)),f(s,"SectionHeading",(()=>W)),f(s,"Paragraph",(()=>w)),f(s,"Text",(()=>d));function g({fontSize:t="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:f="fontWeightNormal",fontColor:c="gray800",lineHeight:s="lineHeightM",children:g,isTruncated:d,as:h,className:u,margin:m="none",...p},S){const y=h||"span";return n.createElement(l,e({},p,{as:y,className:r(o({padding:0,fontFamily:a[i],fontWeight:a[f],color:a[c],fontSize:a[t],lineHeight:a[s]},""),d?o({name:"8uhtka",styles:"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"}):null,u),margin:m,ref:S}),g)}const d=n.forwardRef(g);function h({children:t,testId:i="cf-ui-heading",...r},o){return n.createElement(d,e({as:"h1",testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},r,{ref:o}),t)}const u=n.forwardRef(h);function m({children:t,testId:i="cf-ui-subheading",...r},o){return n.createElement(d,e({as:"h2",testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},r,{ref:o}),t)}const p=n.forwardRef(m);function S(e){return i((()=>{console.warn("Forma 36: Typography component is deprecated. You can safely remove it from your components.")}),[]),n.createElement(n.Fragment,null,e.children)}function y({children:t,size:i="default",testId:r="cf-ui-display-text",as:o,...a},l){let f="fontSize2Xl",c="lineHeight2Xl";return"huge"===i?(f="fontSize4Xl",c="lineHeight4Xl"):"large"===i&&(f="fontSize3Xl",c="lineHeight3Xl"),n.createElement(d,e({as:"h1",testId:r,marginBottom:"default"===i?"spacingL":"spacingXl",fontSize:f,lineHeight:c,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},a,{ref:l}),t)}const H=n.forwardRef(y);function z({children:t,className:i,testId:l="cf-ui-section-heading",...f},c){return n.createElement(d,e({as:"h3",testId:l,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:r(o({letterSpacing:a.letterSpacingWide,textTransform:"uppercase"},""),i)},f,{ref:c}),t)}const W=n.forwardRef(z),w=n.forwardRef((({children:t,testId:i="cf-ui-paragraph",...r},o)=>n.createElement(d,e({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},r,{ref:o}),t)));var b,B;w.displayName="Paragraph",b=module.exports,B=s,Object.keys(B).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(b,e,{enumerable:!0,get:function(){return B[e]}})})); | ||
var $5fdCT$react = require("react"); | ||
var $5fdCT$emotion = require("emotion"); | ||
var $5fdCT$contentfulf36tokens = require("@contentful/f36-tokens"); | ||
var $5fdCT$contentfulf36core = require("@contentful/f36-core"); | ||
function $parcel$export(e, n, v, s) { | ||
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
} | ||
function $parcel$interopDefault(a) { | ||
return a && a.__esModule ? a.default : a; | ||
} | ||
$parcel$export(module.exports, "Heading", () => $edf6509e8a752df1$export$a8a3e93435678ff9); | ||
$parcel$export(module.exports, "Subheading", () => $831292c032eb183f$export$5404b1d39162d870); | ||
$parcel$export(module.exports, "Typography", () => $d22050ec5fdf0a29$export$1c6175f3aa4394b7); | ||
$parcel$export(module.exports, "DisplayText", () => $2918aeb7dafaacc0$export$60374ee25b7d5e87); | ||
$parcel$export(module.exports, "SectionHeading", () => $6b033735b9eed406$export$72d7ca7a5d1d4807); | ||
$parcel$export(module.exports, "Paragraph", () => $4236a7ca048922f6$export$358a232cca1ab2ac); | ||
$parcel$export(module.exports, "Text", () => $dd9fe96501c8d4c8$export$5f1af8db9871e1d6); | ||
const $dd9fe96501c8d4c8$var$DEFAULT_TAG = 'span'; | ||
function $dd9fe96501c8d4c8$var$truncatedStyle() { | ||
return(/*#__PURE__*/ $5fdCT$emotion.css({ | ||
name: "8uhtka", | ||
styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" | ||
})); | ||
} | ||
function $dd9fe96501c8d4c8$var$_Text({ fontSize: fontSize = 'fontSizeM' , fontStack: fontStack = 'fontStackPrimary' , fontWeight: fontWeight = 'fontWeightNormal' , fontColor: fontColor = 'gray800' , lineHeight: lineHeight = 'lineHeightM' , children: children , isTruncated: isTruncated , as: as , className: className , margin: margin = 'none' , ...otherProps }, ref) { | ||
const Element = as || $dd9fe96501c8d4c8$var$DEFAULT_TAG; | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($5fdCT$contentfulf36core.Box, { | ||
...otherProps, | ||
as: Element, | ||
className: $5fdCT$emotion.cx(/*#__PURE__*/ $5fdCT$emotion.css({ | ||
padding: 0, | ||
fontFamily: $parcel$interopDefault($5fdCT$contentfulf36tokens)[fontStack], | ||
fontWeight: $parcel$interopDefault($5fdCT$contentfulf36tokens)[fontWeight], | ||
color: $parcel$interopDefault($5fdCT$contentfulf36tokens)[fontColor], | ||
fontSize: $parcel$interopDefault($5fdCT$contentfulf36tokens)[fontSize], | ||
lineHeight: $parcel$interopDefault($5fdCT$contentfulf36tokens)[lineHeight] | ||
}), isTruncated ? $dd9fe96501c8d4c8$var$truncatedStyle() : null, className), | ||
margin: margin, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $dd9fe96501c8d4c8$export$5f1af8db9871e1d6 = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef($dd9fe96501c8d4c8$var$_Text); | ||
const $edf6509e8a752df1$var$DEFAULT_TAG = 'h1'; | ||
function $edf6509e8a752df1$var$_Heading({ children: children , testId: testId = 'cf-ui-heading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($dd9fe96501c8d4c8$export$5f1af8db9871e1d6, { | ||
as: $edf6509e8a752df1$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
fontSize: "fontSizeXl", | ||
lineHeight: "lineHeightXl", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $edf6509e8a752df1$export$a8a3e93435678ff9 = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef($edf6509e8a752df1$var$_Heading); | ||
const $831292c032eb183f$var$DEFAULT_TAG = 'h2'; | ||
function $831292c032eb183f$var$_Subheading({ children: children , testId: testId = 'cf-ui-subheading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($dd9fe96501c8d4c8$export$5f1af8db9871e1d6, { | ||
as: $831292c032eb183f$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
fontSize: "fontSizeL", | ||
lineHeight: "lineHeightL", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $831292c032eb183f$export$5404b1d39162d870 = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef($831292c032eb183f$var$_Subheading); | ||
function $d22050ec5fdf0a29$export$1c6175f3aa4394b7(props) { | ||
$5fdCT$react.useEffect(()=>{ | ||
console.warn('Forma 36: Typography component is deprecated. You can safely remove it from your components.'); | ||
}, []); | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($parcel$interopDefault($5fdCT$react).Fragment, null, props.children)); | ||
} | ||
const $2918aeb7dafaacc0$var$DEFAULT_TAG = 'h1'; | ||
function $2918aeb7dafaacc0$var$_DisplayText({ children: children , size: size = 'default' , testId: testId = 'cf-ui-display-text' , as: as , ...otherProps }, ref) { | ||
let fontSize = 'fontSize2Xl'; | ||
let lineHeight = 'lineHeight2Xl'; | ||
if (size === 'huge') { | ||
fontSize = 'fontSize4Xl'; | ||
lineHeight = 'lineHeight4Xl'; | ||
} else if (size === 'large') { | ||
fontSize = 'fontSize3Xl'; | ||
lineHeight = 'lineHeight3Xl'; | ||
} | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($dd9fe96501c8d4c8$export$5f1af8db9871e1d6, { | ||
as: $2918aeb7dafaacc0$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: size === 'default' ? 'spacingL' : 'spacingXl', | ||
fontSize: fontSize, | ||
lineHeight: lineHeight, | ||
fontColor: "gray900", | ||
fontWeight: "fontWeightDemiBold", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $2918aeb7dafaacc0$export$60374ee25b7d5e87 = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef($2918aeb7dafaacc0$var$_DisplayText); | ||
const $6b033735b9eed406$var$DEFAULT_TAG = 'h3'; | ||
function $6b033735b9eed406$var$_SectionHeading({ children: children , className: className , testId: testId = 'cf-ui-section-heading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($dd9fe96501c8d4c8$export$5f1af8db9871e1d6, { | ||
as: $6b033735b9eed406$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingL", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
fontSize: "fontSizeS", | ||
lineHeight: "lineHeightS", | ||
className: $5fdCT$emotion.cx(/*#__PURE__*/ $5fdCT$emotion.css({ | ||
letterSpacing: $parcel$interopDefault($5fdCT$contentfulf36tokens).letterSpacingWide, | ||
textTransform: 'uppercase' | ||
}), className), | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $6b033735b9eed406$export$72d7ca7a5d1d4807 = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef($6b033735b9eed406$var$_SectionHeading); | ||
const $4236a7ca048922f6$export$358a232cca1ab2ac = /*#__PURE__*/ $parcel$interopDefault($5fdCT$react).forwardRef(({ children: children , testId: testId = 'cf-ui-paragraph' , ...otherProps }, ref)=>{ | ||
return(/*#__PURE__*/ $parcel$interopDefault($5fdCT$react).createElement($dd9fe96501c8d4c8$export$5f1af8db9871e1d6, { | ||
as: "p", | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
lineHeight: "lineHeightM", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
}); | ||
$4236a7ca048922f6$export$358a232cca1ab2ac.displayName = 'Paragraph'; | ||
//# sourceMappingURL=main.js.map |
@@ -1,2 +0,157 @@ | ||
import e from"@babel/runtime/helpers/esm/extends";import t,{useEffect as n}from"react";import{cx as i,css as o}from"emotion";import a from"@contentful/f36-tokens";import{Box as r}from"@contentful/f36-core";function f(e,t,n,i){Object.defineProperty(e,t,{get:n,set:i,enumerable:!0,configurable:!0})}var l={};f(l,"Heading",(()=>h)),f(l,"Subheading",(()=>d)),f(l,"Typography",(()=>p)),f(l,"DisplayText",(()=>S)),f(l,"SectionHeading",(()=>H)),f(l,"Paragraph",(()=>z)),f(l,"Text",(()=>g));function s({fontSize:n="fontSizeM",fontStack:f="fontStackPrimary",fontWeight:l="fontWeightNormal",fontColor:s="gray800",lineHeight:g="lineHeightM",children:c,isTruncated:h,as:m,className:d,margin:p="none",...u},S){const y=m||"span";return t.createElement(r,e({},u,{as:y,className:i(o({padding:0,fontFamily:a[f],fontWeight:a[l],color:a[s],fontSize:a[n],lineHeight:a[g]},""),h?o({name:"8uhtka",styles:"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"}):null,d),margin:p,ref:S}),c)}const g=t.forwardRef(s);function c({children:n,testId:i="cf-ui-heading",...o},a){return t.createElement(g,e({as:"h1",testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o,{ref:a}),n)}const h=t.forwardRef(c);function m({children:n,testId:i="cf-ui-subheading",...o},a){return t.createElement(g,e({as:"h2",testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o,{ref:a}),n)}const d=t.forwardRef(m);function p(e){return n((()=>{console.warn("Forma 36: Typography component is deprecated. You can safely remove it from your components.")}),[]),t.createElement(t.Fragment,null,e.children)}function u({children:n,size:i="default",testId:o="cf-ui-display-text",as:a,...r},f){let l="fontSize2Xl",s="lineHeight2Xl";return"huge"===i?(l="fontSize4Xl",s="lineHeight4Xl"):"large"===i&&(l="fontSize3Xl",s="lineHeight3Xl"),t.createElement(g,e({as:"h1",testId:o,marginBottom:"default"===i?"spacingL":"spacingXl",fontSize:l,lineHeight:s,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},r,{ref:f}),n)}const S=t.forwardRef(u);function y({children:n,className:r,testId:f="cf-ui-section-heading",...l},s){return t.createElement(g,e({as:"h3",testId:f,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:i(o({letterSpacing:a.letterSpacingWide,textTransform:"uppercase"},""),r)},l,{ref:s}),n)}const H=t.forwardRef(y),z=t.forwardRef((({children:n,testId:i="cf-ui-paragraph",...o},a)=>t.createElement(g,e({as:"p",testId:i,marginBottom:"spacingM",lineHeight:"lineHeightM"},o,{ref:a}),n)));z.displayName="Paragraph";export{h as Heading,d as Subheading,p as Typography,S as DisplayText,H as SectionHeading,z as Paragraph,g as Text}; | ||
import $4MbOE$react, {useEffect as $4MbOE$useEffect} from "react"; | ||
import {css as $4MbOE$css, cx as $4MbOE$cx} from "emotion"; | ||
import $4MbOE$contentfulf36tokens from "@contentful/f36-tokens"; | ||
import {Box as $4MbOE$Box} from "@contentful/f36-core"; | ||
const $6ed778543c9a7861$var$DEFAULT_TAG = 'span'; | ||
function $6ed778543c9a7861$var$truncatedStyle() { | ||
return(/*#__PURE__*/ $4MbOE$css({ | ||
name: "8uhtka", | ||
styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" | ||
})); | ||
} | ||
function $6ed778543c9a7861$var$_Text({ fontSize: fontSize = 'fontSizeM' , fontStack: fontStack = 'fontStackPrimary' , fontWeight: fontWeight = 'fontWeightNormal' , fontColor: fontColor = 'gray800' , lineHeight: lineHeight = 'lineHeightM' , children: children , isTruncated: isTruncated , as: as , className: className , margin: margin = 'none' , ...otherProps }, ref) { | ||
const Element = as || $6ed778543c9a7861$var$DEFAULT_TAG; | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($4MbOE$Box, { | ||
...otherProps, | ||
as: Element, | ||
className: $4MbOE$cx(/*#__PURE__*/ $4MbOE$css({ | ||
padding: 0, | ||
fontFamily: $4MbOE$contentfulf36tokens[fontStack], | ||
fontWeight: $4MbOE$contentfulf36tokens[fontWeight], | ||
color: $4MbOE$contentfulf36tokens[fontColor], | ||
fontSize: $4MbOE$contentfulf36tokens[fontSize], | ||
lineHeight: $4MbOE$contentfulf36tokens[lineHeight] | ||
}), isTruncated ? $6ed778543c9a7861$var$truncatedStyle() : null, className), | ||
margin: margin, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $6ed778543c9a7861$export$5f1af8db9871e1d6 = /*#__PURE__*/ $4MbOE$react.forwardRef($6ed778543c9a7861$var$_Text); | ||
const $2757f13134d7f609$var$DEFAULT_TAG = 'h1'; | ||
function $2757f13134d7f609$var$_Heading({ children: children , testId: testId = 'cf-ui-heading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($6ed778543c9a7861$export$5f1af8db9871e1d6, { | ||
as: $2757f13134d7f609$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
fontSize: "fontSizeXl", | ||
lineHeight: "lineHeightXl", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $2757f13134d7f609$export$a8a3e93435678ff9 = /*#__PURE__*/ $4MbOE$react.forwardRef($2757f13134d7f609$var$_Heading); | ||
const $7d17967797388737$var$DEFAULT_TAG = 'h2'; | ||
function $7d17967797388737$var$_Subheading({ children: children , testId: testId = 'cf-ui-subheading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($6ed778543c9a7861$export$5f1af8db9871e1d6, { | ||
as: $7d17967797388737$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
fontSize: "fontSizeL", | ||
lineHeight: "lineHeightL", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $7d17967797388737$export$5404b1d39162d870 = /*#__PURE__*/ $4MbOE$react.forwardRef($7d17967797388737$var$_Subheading); | ||
function $3e422817efdc58c6$export$1c6175f3aa4394b7(props) { | ||
$4MbOE$useEffect(()=>{ | ||
console.warn('Forma 36: Typography component is deprecated. You can safely remove it from your components.'); | ||
}, []); | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($4MbOE$react.Fragment, null, props.children)); | ||
} | ||
const $222901889a3a3efa$var$DEFAULT_TAG = 'h1'; | ||
function $222901889a3a3efa$var$_DisplayText({ children: children , size: size = 'default' , testId: testId = 'cf-ui-display-text' , as: as , ...otherProps }, ref) { | ||
let fontSize = 'fontSize2Xl'; | ||
let lineHeight = 'lineHeight2Xl'; | ||
if (size === 'huge') { | ||
fontSize = 'fontSize4Xl'; | ||
lineHeight = 'lineHeight4Xl'; | ||
} else if (size === 'large') { | ||
fontSize = 'fontSize3Xl'; | ||
lineHeight = 'lineHeight3Xl'; | ||
} | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($6ed778543c9a7861$export$5f1af8db9871e1d6, { | ||
as: $222901889a3a3efa$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: size === 'default' ? 'spacingL' : 'spacingXl', | ||
fontSize: fontSize, | ||
lineHeight: lineHeight, | ||
fontColor: "gray900", | ||
fontWeight: "fontWeightDemiBold", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $222901889a3a3efa$export$60374ee25b7d5e87 = /*#__PURE__*/ $4MbOE$react.forwardRef($222901889a3a3efa$var$_DisplayText); | ||
const $7382fd5d78575daf$var$DEFAULT_TAG = 'h3'; | ||
function $7382fd5d78575daf$var$_SectionHeading({ children: children , className: className , testId: testId = 'cf-ui-section-heading' , ...otherProps }, ref) { | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($6ed778543c9a7861$export$5f1af8db9871e1d6, { | ||
as: $7382fd5d78575daf$var$DEFAULT_TAG, | ||
testId: testId, | ||
marginBottom: "spacingL", | ||
fontWeight: "fontWeightDemiBold", | ||
fontColor: "gray900", | ||
fontSize: "fontSizeS", | ||
lineHeight: "lineHeightS", | ||
className: $4MbOE$cx(/*#__PURE__*/ $4MbOE$css({ | ||
letterSpacing: $4MbOE$contentfulf36tokens.letterSpacingWide, | ||
textTransform: 'uppercase' | ||
}), className), | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
} | ||
const $7382fd5d78575daf$export$72d7ca7a5d1d4807 = /*#__PURE__*/ $4MbOE$react.forwardRef($7382fd5d78575daf$var$_SectionHeading); | ||
const $8c581f9822f07d46$export$358a232cca1ab2ac = /*#__PURE__*/ $4MbOE$react.forwardRef(({ children: children , testId: testId = 'cf-ui-paragraph' , ...otherProps }, ref)=>{ | ||
return(/*#__PURE__*/ $4MbOE$react.createElement($6ed778543c9a7861$export$5f1af8db9871e1d6, { | ||
as: "p", | ||
testId: testId, | ||
marginBottom: "spacingM", | ||
lineHeight: "lineHeightM", | ||
...otherProps, | ||
ref: ref | ||
}, children)); | ||
}); | ||
$8c581f9822f07d46$export$358a232cca1ab2ac.displayName = 'Paragraph'; | ||
export {$2757f13134d7f609$export$a8a3e93435678ff9 as Heading, $7d17967797388737$export$5404b1d39162d870 as Subheading, $3e422817efdc58c6$export$1c6175f3aa4394b7 as Typography, $222901889a3a3efa$export$60374ee25b7d5e87 as DisplayText, $7382fd5d78575daf$export$72d7ca7a5d1d4807 as SectionHeading, $8c581f9822f07d46$export$358a232cca1ab2ac as Paragraph, $6ed778543c9a7861$export$5f1af8db9871e1d6 as Text}; | ||
//# sourceMappingURL=module.js.map |
{ | ||
"name": "@contentful/f36-typography", | ||
"version": "4.0.1-next-v4-9789.2434+754dee05", | ||
"version": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"description": "Forma 36: typography React Component", | ||
@@ -21,8 +21,8 @@ "license": "MIT", | ||
"scripts": { | ||
"build": "parcel build index.ts" | ||
"build": "parcel build" | ||
}, | ||
"dependencies": { | ||
"@babel/runtime": "^7.6.2", | ||
"@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05", | ||
"@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
"emotion": "^10.0.17" | ||
@@ -36,3 +36,3 @@ }, | ||
}, | ||
"gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d" | ||
"gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008" | ||
} |
# @contentful/f36-typography | ||
Forma 36 includes a number of typography components, including a wrapper to automatically add spacing to typography elements. | ||
This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning. | ||
Typography components are not tied to specific semantic elements - it's possible to render any typography component as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span`, or `div` element. | ||
Forma 36 uses system UI fonts. System UI fonts refer to the fonts used to render text in the UI of an operating system. When used on the web they offer familiarity, load with zero-latency, and support a wide number of character sets. | ||
### Note: This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning. | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components) | ||
## Components | ||
- [Text](./src/Text.mdx) | ||
- [Paragraph](./src/Paragraph.mdx) | ||
- [Heading](./src/Heading.mdx) | ||
- [SectionHeading](./src/SectionHeading.mdx) | ||
- [Subheading](./src/Subheading.mdx) | ||
- [DisplayText](./src/DisplayText.mdx) | ||
Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
701
2
71801
6