@pushwoosh/kit-typography 1.5.2 → 1.7.0

package/code/code.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const CodeBox = styled.div.withConfig({
   displayName: "CodeBox",
   componentId: "sc-15hd43f-0"
-})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MONO, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR);
+})(["", ""], variants.code);
 CodeBox.displayName = 'CodeBox';

package/footnote/footnote.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const FootnoteBox = styled.div.withConfig({
   displayName: "FootnoteBox",
   componentId: "sc-1yebxfg-0"
-})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL);
+})(["", ""], variants.footnote);
 FootnoteBox.displayName = 'FootnoteBox';

package/global-styles/global-styles.component.js

@@ -1,4 +1,4 @@
 import { createGlobalStyle } from 'styled-components';
 import { Color, FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
-export const GlobalStyles = createGlobalStyle(["*,*::before,*::after{box-sizing:border-box;}body{color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}button,a{&:not(:disabled){cursor:pointer;}&:focus{outline:none;}}"], Color.MAIN, FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR);
+export const GlobalStyles = createGlobalStyle(["*,*::before,*::after{box-sizing:border-box;}body{color:", ";font-family:", ";font-size:", ";font-weight:", ";line-height:", ";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}a{color:", ";&:hover{color:", ";}}button,a{&:focus{outline:none;}}"], Color.MAIN, FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR, Color.PRIMARY, Color.PRIMARY_HOVER);
 GlobalStyles.displayName = 'GlobalStyles';

package/h1/h1.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const H1Box = styled.h1.withConfig({
   displayName: "H1Box",
   componentId: "sc-nenzzw-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING1, FontWeight.BOLD, LineHeight.HEADING1);
+})(["margin:0;", ""], variants.h1);
 H1Box.displayName = 'H1Box';

package/h2/h2.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const H2Box = styled.h2.withConfig({
   displayName: "H2Box",
   componentId: "sc-ev7pmn-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2);
+})(["margin:0;", ""], variants.h2);
 H2Box.displayName = 'H2Box';

package/h3/h3.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const H3Box = styled.h3.withConfig({
   displayName: "H3Box",
   componentId: "sc-mhts3r-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING3, FontWeight.BOLD, LineHeight.HEADING3);
+})(["margin:0;", ""], variants.h3);
 H3Box.displayName = 'H3Box';

package/h4/h4.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const H4Box = styled.h4.withConfig({
   displayName: "H4Box",
   componentId: "sc-1178dfn-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING4, FontWeight.MEDIUM, LineHeight.HEADING4);
+})(["margin:0;", ""], variants.h4);
 H4Box.displayName = 'H4Box';

package/h5/h5.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const H5Box = styled.h5.withConfig({
   displayName: "H5Box",
   componentId: "sc-1nc3vby-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";text-transform:uppercase;"], FontFamily.MAIN, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5);
+})(["margin:0;", " text-transform:uppercase;"], variants.h5);
 H5Box.displayName = 'H5Box';

package/index.d.ts

@@ -7,3 +7,5 @@ export * from './h3';
 export * from './h4';
 export * from './h5';
 export * from './paragraph';
+export { Text } from './text/Text';
+export { type TypographyVariant } from './map';

package/index.js

@@ -6,4 +6,5 @@ export * from './h2';
 export * from './h3';
 export * from './h4';
 export * from './h5';
-export * from './paragraph';
+export * from './paragraph';
+export { Text } from './text/Text';

package/map.d.ts

@@ -0,0 +1,3 @@
+import { type FlattenSimpleInterpolation } from 'styled-components';
+export type TypographyVariant = 'standard' | 'footnote' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'code';
+export declare const variants: Record<TypographyVariant, FlattenSimpleInterpolation>;

package/map.js

@@ -0,0 +1,12 @@
+import { css } from 'styled-components';
+import { FontFamily, FontSize, LineHeight, FontWeight } from '@pushwoosh/kit-constants';
+export const variants = {
+  standard: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR),
+  footnote: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL),
+  h1: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING1, FontWeight.BOLD, LineHeight.HEADING1),
+  h2: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING2, FontWeight.BOLD, LineHeight.HEADING2),
+  h3: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING3, FontWeight.BOLD, LineHeight.HEADING3),
+  h4: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING4, FontWeight.BOLD, LineHeight.HEADING4),
+  h5: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MAIN, FontSize.HEADING5, FontWeight.MEDIUM, LineHeight.HEADING5),
+  code: css(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";"], FontFamily.MONO, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR)
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-typography",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "React component for build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/paragraph/paragraph.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import { FontFamily, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+import { variants } from '../map';
 export const ParagraphBox = styled.p.withConfig({
   displayName: "ParagraphBox",
   componentId: "sc-1o1vp14-0"
-})(["margin:0;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";& + &{margin:0.5em 0 0;}"], FontFamily.MAIN, FontSize.REGULAR, FontWeight.REGULAR, LineHeight.REGULAR);
+})(["margin:0;", " & + &{margin:0.5em 0 0;}"], variants.standard);
 ParagraphBox.displayName = 'ParagraphBox';

package/text/Text.d.ts

@@ -0,0 +1,5 @@
+import { type TypographyVariant } from '../map';
+export declare const Text: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $variant?: TypographyVariant | undefined;
+}, never>;

package/text/Text.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { variants } from '../map';
+export const Text = styled.span.withConfig({
+  displayName: "Text",
+  componentId: "sc-s3ssy9-0"
+})(["", " ", "}"], ({
+  $color
+}) => $color && `color: ${$color};`, ({
+  $variant = 'standard'
+}) => variants[$variant]);