@contentful/f36-typography - npm Package Compare versions

Comparing version 4.0.1-next-v4-5860.2171 to 4.0.1-next-v4-6174.2195

dist/main.js

@@ -1,2 +0,2 @@
-var e=f(require("@babel/runtime/helpers/extends")),{css:t,cx:n}=require("emotion"),i=require("react"),a=f(i),{useContext:r,createContext:o}=i,l=f(require("@contentful/f36-tokens")),{Box:c}=require("@contentful/f36-core");function s(e,t,n,i){Object.defineProperty(e,t,{get:n,set:i,enumerable:!0,configurable:!0})}function f(e){return e&&e.__esModule?e.default:e}var g={};s(g,"Heading",(()=>p)),s(g,"Subheading",(()=>x)),s(g,"Typography",(()=>h)),s(g,"DisplayText",(()=>y)),s(g,"SectionHeading",(()=>b)),s(g,"Text",(()=>T));const d={displayText:"spacingL",displayTextLarge:"spacingXl",heading:"spacingM",sectionHeading:"spacingL",subheading:"spacingM",text:"spacingM"},u=o({});function h(t){return a.createElement(u.Provider,{value:d},a.createElement(c,e({testId:"cf-ui-text-container"},t)))}const m=({children:i,className:o,...s},f)=>{const g=r(u);return a.createElement(c,e({as:"h1",display:"block",margin:"none",marginBottom:g.heading,testId:"cf-ui-heading",className:n(t({fontFamily:l.fontStackPrimary,fontWeight:l.fontWeightDemiBold,color:l.colorTextDark,fontSize:l.fontSizeXl,lineHeight:l.lineHeightXl,textRendering:"optimizeLegibility"},""),o)},s,{ref:f}),i)},p=a.forwardRef(m),S=({children:i,className:o,...c},s)=>{const f=r(u);return a.createElement(p,e({as:"h2",testId:"cf-ui-subheading",marginBottom:f.subheading,className:n(t({fontSize:l.fontSizeL,lineHeight:l.lineHeightL},""),o)},c,{ref:s}),i)},x=a.forwardRef(S),H=({children:i,className:o,size:c="default",...s},f)=>{const g=r(u);let d="";return d=t("huge"===c?{fontSize:l.fontSize4Xl,lineHeight:l.lineHeight4Xl}:"large"===c?{fontSize:l.fontSize3Xl,lineHeight:l.lineHeight3Xl}:{fontSize:l.fontSize2Xl,lineHeight:l.lineHeight2Xl},""),a.createElement(p,e({as:"h1",testId:"cf-ui-display-text",marginBottom:"default"===c?g.displayText:g.displayTextLarge,className:n(d,o)},s,{ref:f}),i)},y=a.forwardRef(H),z=({children:i,className:o,...c},s)=>{const f=r(u);return a.createElement(p,e({as:"h3",testId:"cf-ui-section-heading",marginBottom:f.sectionHeading,className:n(t({fontSize:l.fontSizeS,lineHeight:l.lineHeightS,letterSpacing:l.letterSpacingWide,textTransform:"uppercase"},""),o)},c,{ref:s}),i)},b=a.forwardRef(z),N=({children:i,className:o,...c},s)=>{const f=r(u);return a.createElement(p,e({as:"p",testId:"cf-ui-text",marginBottom:f.text,className:n(t({fontWeight:l.fontWeightNormal,color:l.gray700,fontSize:l.fontSizeM,lineHeight:l.lineHeightM},""),o)},c,{ref:s}),i)},T=a.forwardRef(N);var X,E;X=module.exports,E=g,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(X,e,{enumerable:!0,get:function(){return E[e]}})}));
+var e=s(require("@babel/runtime/helpers/extends")),t=require("react"),n=s(t),{useEffect:i}=t,{cx:r,css:o}=require("emotion"),a=s(require("@contentful/f36-tokens")),{useBox:l}=require("@contentful/f36-core");function f(e,t,n,i){Object.defineProperty(e,t,{get:n,set:i,enumerable:!0,configurable:!0})}function s(e){return e&&e.__esModule?e.default:e}var c={};f(c,"Heading",(()=>u)),f(c,"Subheading",(()=>p)),f(c,"Typography",(()=>S)),f(c,"DisplayText",(()=>H)),f(c,"SectionHeading",(()=>W)),f(c,"Paragraph",(()=>w)),f(c,"Text",(()=>d));const g=({fontSize:t="fontSizeM",fontStack:i="fontStackPrimary",fontWeight:f="fontWeightNormal",fontColor:s="gray700",lineHeight:c,children:g,isTruncated:d,as:h="span",...u},m)=>{const{boxProps:p,Element:S}=l({...u,as:h});return n.createElement(S,e({},p,{className:r(o({margin:0,padding:0,fontFamily:a[i],fontWeight:a[f],color:a[s],fontSize:a[t],lineHeight:a[c]},""),d?o({name:"8uhtka",styles:"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"}):null,p.className),ref:m}),g)},d=n.forwardRef(g),h=({children:t,testId:i="cf-ui-heading",...r},o)=>n.createElement(d,e({as:"h1",testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},r,{ref:o}),t),u=n.forwardRef(h),m=({children:t,testId:i="cf-ui-subheading",...r},o)=>n.createElement(d,e({as:"h2",testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},r,{ref:o}),t),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)}const y=({children:t,size:i="default",testId:r="cf-ui-display-text",...o},a)=>{let l="fontSize2Xl",f="lineHeight2Xl";return"huge"===i?(l="fontSize4Xl",f="lineHeight4Xl"):"large"===i&&(l="fontSize3Xl",f="lineHeight3Xl"),n.createElement(d,e({as:"h1",testId:r,marginBottom:"default"===i?"spacingL":"spacingXl",fontSize:l,lineHeight:f,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},o,{ref:a}),t)},H=n.forwardRef(y),z=({children:t,className:i,testId:l="cf-ui-section-heading",...f},s)=>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:s}),t),W=n.forwardRef(z),b=({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),w=n.forwardRef(b);var x,B;x=module.exports,B=c,Object.keys(B).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(x,e,{enumerable:!0,get:function(){return B[e]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as i}from"emotion";import n,{useContext as a,createContext as r}from"react";import o from"@contentful/f36-tokens";import{Box as s}from"@contentful/f36-core";function l(e,t,i,n){Object.defineProperty(e,t,{get:i,set:n,enumerable:!0,configurable:!0})}var c={};l(c,"Heading",(()=>h)),l(c,"Subheading",(()=>u)),l(c,"Typography",(()=>m)),l(c,"DisplayText",(()=>x)),l(c,"SectionHeading",(()=>y)),l(c,"Text",(()=>b));const g={displayText:"spacingL",displayTextLarge:"spacingXl",heading:"spacingM",sectionHeading:"spacingL",subheading:"spacingM",text:"spacingM"},f=r({});function m(t){return n.createElement(f.Provider,{value:g},n.createElement(s,e({testId:"cf-ui-text-container"},t)))}const d=({children:r,className:l,...c},g)=>{const m=a(f);return n.createElement(s,e({as:"h1",display:"block",margin:"none",marginBottom:m.heading,testId:"cf-ui-heading",className:t(i({fontFamily:o.fontStackPrimary,fontWeight:o.fontWeightDemiBold,color:o.colorTextDark,fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,textRendering:"optimizeLegibility"},""),l)},c,{ref:g}),r)},h=n.forwardRef(d),p=({children:r,className:s,...l},c)=>{const g=a(f);return n.createElement(h,e({as:"h2",testId:"cf-ui-subheading",marginBottom:g.subheading,className:t(i({fontSize:o.fontSizeL,lineHeight:o.lineHeightL},""),s)},l,{ref:c}),r)},u=n.forwardRef(p),S=({children:r,className:s,size:l="default",...c},g)=>{const m=a(f);let d="";return d=i("huge"===l?{fontSize:o.fontSize4Xl,lineHeight:o.lineHeight4Xl}:"large"===l?{fontSize:o.fontSize3Xl,lineHeight:o.lineHeight3Xl}:{fontSize:o.fontSize2Xl,lineHeight:o.lineHeight2Xl},""),n.createElement(h,e({as:"h1",testId:"cf-ui-display-text",marginBottom:"default"===l?m.displayText:m.displayTextLarge,className:t(d,s)},c,{ref:g}),r)},x=n.forwardRef(S),H=({children:r,className:s,...l},c)=>{const g=a(f);return n.createElement(h,e({as:"h3",testId:"cf-ui-section-heading",marginBottom:g.sectionHeading,className:t(i({fontSize:o.fontSizeS,lineHeight:o.lineHeightS,letterSpacing:o.letterSpacingWide,textTransform:"uppercase"},""),s)},l,{ref:c}),r)},y=n.forwardRef(H),z=({children:r,className:s,...l},c)=>{const g=a(f);return n.createElement(h,e({as:"p",testId:"cf-ui-text",marginBottom:g.text,className:t(i({fontWeight:o.fontWeightNormal,color:o.gray700,fontSize:o.fontSizeM,lineHeight:o.lineHeightM},""),s)},l,{ref:c}),r)},b=n.forwardRef(z);export{h as Heading,u as Subheading,m as Typography,x as DisplayText,y as SectionHeading,b as Text};
+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{useBox as r}from"@contentful/f36-core";function l(e,t,n,i){Object.defineProperty(e,t,{get:n,set:i,enumerable:!0,configurable:!0})}var f={};l(f,"Heading",(()=>h)),l(f,"Subheading",(()=>d)),l(f,"Typography",(()=>p)),l(f,"DisplayText",(()=>S)),l(f,"SectionHeading",(()=>H)),l(f,"Paragraph",(()=>x)),l(f,"Text",(()=>g));const s=({fontSize:n="fontSizeM",fontStack:l="fontStackPrimary",fontWeight:f="fontWeightNormal",fontColor:s="gray700",lineHeight:g,children:c,isTruncated:h,as:m="span",...d},p)=>{const{boxProps:u,Element:S}=r({...d,as:m});return t.createElement(S,e({},u,{className:i(o({margin:0,padding:0,fontFamily:a[l],fontWeight:a[f],color:a[s],fontSize:a[n],lineHeight:a[g]},""),h?o({name:"8uhtka",styles:"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"}):null,u.className),ref:p}),c)},g=t.forwardRef(s),c=({children:n,testId:i="cf-ui-heading",...o},a)=>t.createElement(g,e({as:"h1",testId:i,marginBottom:"spacingM",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeXl",lineHeight:"lineHeightXl"},o,{ref:a}),n),h=t.forwardRef(c),m=({children:n,testId:i="cf-ui-subheading",...o},a)=>t.createElement(g,e({as:"h2",testId:i,marginBottom:"spacingM",fontSize:"fontSizeL",lineHeight:"lineHeightL",fontWeight:"fontWeightDemiBold",fontColor:"gray900"},o,{ref:a}),n),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)}const u=({children:n,size:i="default",testId:o="cf-ui-display-text",...a},r)=>{let l="fontSize2Xl",f="lineHeight2Xl";return"huge"===i?(l="fontSize4Xl",f="lineHeight4Xl"):"large"===i&&(l="fontSize3Xl",f="lineHeight3Xl"),t.createElement(g,e({as:"h1",testId:o,marginBottom:"default"===i?"spacingL":"spacingXl",fontSize:l,lineHeight:f,fontColor:"gray900",fontWeight:"fontWeightDemiBold"},a,{ref:r}),n)},S=t.forwardRef(u),y=({children:n,className:r,testId:l="cf-ui-section-heading",...f},s)=>t.createElement(g,e({as:"h3",testId:l,marginBottom:"spacingL",fontWeight:"fontWeightDemiBold",fontColor:"gray900",fontSize:"fontSizeS",lineHeight:"lineHeightS",className:i(o({letterSpacing:a.letterSpacingWide,textTransform:"uppercase"},""),r)},f,{ref:s}),n),H=t.forwardRef(y),z=({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),x=t.forwardRef(z);export{h as Heading,d as Subheading,p as Typography,S as DisplayText,H as SectionHeading,x as Paragraph,g as Text};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import React from "react";
-import { CommonProps, MarginProps, PolymorphicComponent, PolymorphicComponentProps } from "@contentful/f36-core";
-export interface TypographyProps extends CommonProps {
+import { FontSizeTokens, LineHeightTokens, FontWeightTokens, FontStackTokens, ColorTokens } from "@contentful/f36-tokens";
+import { PolymorphicComponent, CommonProps, MarginProps, PolymorphicComponentProps } from "@contentful/f36-core";
+interface TextInternalProps extends CommonProps, MarginProps {
     children?: React.ReactNode;
+    fontSize?: FontSizeTokens;
+    lineHeight?: LineHeightTokens;
+    fontStack?: FontStackTokens;
+    fontWeight?: FontWeightTokens;
+    fontColor?: ColorTokens;
+    isTruncated?: boolean;
 }
-export function Typography(props: TypographyProps): JSX.Element;
-export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+declare const DEFAULT_TAG = "span";
+export type TextProps<E extends React.ElementType> = PolymorphicComponentProps<E, TextInternalProps>;
+export const Text: PolymorphicComponent<TextInternalProps, typeof DEFAULT_TAG>;
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface HeadingInternalProps extends CommonProps, MarginProps {
     as?: HeadingElement;
     children?: React.ReactNode;
+    isTruncated?: boolean;
 }
 export type HeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, HeadingInternalProps>;
-declare const DEFAULT_TAG = "h1";
-export const Heading: PolymorphicComponent<HeadingInternalProps, typeof DEFAULT_TAG>;
-declare const _DEFAULT_TAG1 = "h2";
-export type SubheadingProps<E extends React.ElementType> = HeadingProps<E>;
-export const Subheading: PolymorphicComponent<HeadingInternalProps, typeof _DEFAULT_TAG1>;
-declare const _DEFAULT_TAG2 = "h1";
-interface DisplayTextInternalProps extends HeadingInternalProps {
+declare const _DEFAULT_TAG1 = "h1";
+export const Heading: PolymorphicComponent<HeadingInternalProps, typeof _DEFAULT_TAG1>;
+declare const _DEFAULT_TAG2 = "h2";
+interface SubheadingInternalProps extends CommonProps, MarginProps {
+    as?: HeadingElement;
+    isTruncated?: boolean;
+}
+export type SubheadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, SubheadingInternalProps>;
+export const Subheading: PolymorphicComponent<SubheadingInternalProps, typeof _DEFAULT_TAG2>;
+export interface TypographyProps {
+    children?: React.ReactNode;
+}
+/**
+ * @deprecated
+ */
+export function Typography(props: TypographyProps): JSX.Element;
+declare const _DEFAULT_TAG3 = "h1";
+interface DisplayTextInternalProps extends CommonProps, MarginProps {
     size?: 'default' | 'large' | 'huge';
+    as?: HeadingElement;
+    isTruncated?: boolean;
 }
 export type DisplayTextProps<E extends React.ElementType> = PolymorphicComponentProps<E, DisplayTextInternalProps>;
-export const DisplayText: PolymorphicComponent<DisplayTextInternalProps, typeof _DEFAULT_TAG2>;
-declare const _DEFAULT_TAG3 = "h3";
-export type SectionHeadingProps<E extends React.ElementType> = HeadingProps<E>;
-export const SectionHeading: PolymorphicComponent<HeadingInternalProps, typeof _DEFAULT_TAG3>;
-declare const _DEFAULT_TAG4 = "p";
-export type TextProps<E extends React.ElementType> = HeadingProps<E>;
-export const Text: PolymorphicComponent<HeadingInternalProps, typeof _DEFAULT_TAG4>;
+export const DisplayText: PolymorphicComponent<DisplayTextInternalProps, typeof _DEFAULT_TAG3>;
+declare const _DEFAULT_TAG4 = "h3";
+interface SectionHeadingInternalProps extends CommonProps, MarginProps {
+    as?: HeadingElement;
+    isTruncated?: boolean;
+}
+export type SectionHeadingProps<E extends React.ElementType> = PolymorphicComponentProps<E, SectionHeadingInternalProps>;
+export const SectionHeading: PolymorphicComponent<SectionHeadingInternalProps, typeof _DEFAULT_TAG4>;
+declare const _DEFAULT_TAG5 = "p";
+type ParagraphInternalProps = CommonProps & MarginProps & {
+    children: React.ReactNode;
+    as?: typeof _DEFAULT_TAG5;
+    isTruncated?: boolean;
+};
+export type ParagraphProps = PolymorphicComponentProps<'p', ParagraphInternalProps>;
+export const Paragraph: PolymorphicComponent<ParagraphInternalProps, typeof _DEFAULT_TAG5>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@contentful/f36-typography",
-  "version": "4.0.1-next-v4-5860.2171+c6b1cde4",
+  "version": "4.0.1-next-v4-6174.2195+eac2d8db",
   "description": "Forma 36: typography React Component",
@@ -25,4 +25,4 @@ "license": "MIT",
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-5860.2171+c6b1cde4",
-    "@contentful/f36-tokens": "4.0.1-next-v4-5860.2171+c6b1cde4",
+    "@contentful/f36-core": "4.0.1-next-v4-6174.2195+eac2d8db",
+    "@contentful/f36-tokens": "4.0.1-next-v4-6174.2195+eac2d8db",
     "emotion": "^10.0.17"
@@ -36,3 +36,3 @@ },
   },
-  "gitHead": "c6b1cde4bed22b5a959ed4dd61ad9c963fc09a60"
+  "gitHead": "eac2d8db77c35a1fe0f851b98e347ea9b27ba352"
 }

src/index.ts

@@ -11,3 +11,5 @@ export { Heading } from './Heading';
 export type { SectionHeadingProps } from './SectionHeading';
+export { Paragraph } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
 export { Text } from './Text';
 export type { TextProps } from './Text';

New alerts

License Policy Violation

License

This 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 risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

77767

decreased by-24.51%

Lines of code

481

decreased by-7.14%

Number of lines in readme file

17

decreased by-80%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-6174.2195+eac2d8db

• Updated@contentful/f36-tokens@4.0.1-next-v4-6174.2195+eac2d8db