@entur/typography 1.6.10 → 1.6.13

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.13](https://bitbucket.org/enturas/design-system/compare/@entur/typography@1.6.12...@entur/typography@1.6.13) (2022-05-13)
+
+### Bug Fixes
+
+- **text elements:** fix margin prop values being overwritten be default value for margin on all text ([ce7b980](https://bitbucket.org/enturas/design-system/commits/ce7b980a0bb874dbcaa46c9ceb0cfdb7b5ef8f5a))
+
+## [1.6.12](https://bitbucket.org/enturas/design-system/compare/@entur/typography@1.6.11...@entur/typography@1.6.12) (2022-04-27)
+
+**Note:** Version bump only for package @entur/typography
+
+## [1.6.11](https://bitbucket.org/enturas/design-system/compare/@entur/typography@1.6.10...@entur/typography@1.6.11) (2022-02-09)
+
+**Note:** Version bump only for package @entur/typography
+
 ## [1.6.10](https://bitbucket.org/enturas/design-system/compare/@entur/typography@1.6.9...@entur/typography@1.6.10) (2021-11-17)
 
 **Note:** Version bump only for package @entur/typography

package/dist/BaseHeading.d.ts

@@ -14,7 +14,5 @@ declare type BaseHeadingOwnProps = {
 };
 declare const defaultElement = "h1";
 export declare type BaseHeadingProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<BaseHeadingOwnProps, T>;
-export declare const BaseHeading: <E extends React.ElementType<any> = "h1">({ className, level, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin" | "level">> & BaseHeadingOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const BaseHeading: <E extends React.ElementType<any> = "h1">({ className, level, margin, as, ...rest }: BaseHeadingProps<E>) => JSX.Element;
 export {};

package/dist/CodeText.d.ts

@@ -12,7 +12,5 @@ export declare type CodeTextOwnProps = {
 };
 export declare type CodeTextProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<CodeTextOwnProps, E>;
 declare const defaultElement = "code";
-export declare const CodeText: <E extends React.ElementType<any> = "code">({ className, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children">> & CodeTextOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const CodeText: <E extends React.ElementType<any> = "code">({ className, as, ...rest }: CodeTextProps<E>) => JSX.Element;
 export {};

package/dist/EmphasizedText.d.ts

@@ -16,7 +16,5 @@ export declare type EmphasizedTextOwnProps = {
 };
 export declare type EmphasizedTextProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<EmphasizedTextOwnProps, E>;
 declare const defaultElement = "em";
-export declare const EmphasizedText: <E extends React.ElementType<any> = "em">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & EmphasizedTextOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const EmphasizedText: <E extends React.ElementType<any> = "em">({ className, margin, as, ...rest }: EmphasizedTextProps<E>) => JSX.Element;
 export {};

package/dist/Heading1.d.ts

@@ -16,7 +16,5 @@ export declare type Heading1OwnProps = {
 };
 declare const defaultElement = "h1";
 export declare type Heading1Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading1OwnProps, T>;
-export declare const Heading1: <E extends React.ElementType<any> = "h1">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading1OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading1: <E extends React.ElementType<any> = "h1">({ margin, children, as, ...rest }: Heading1Props<E>) => JSX.Element;
 export {};

package/dist/Heading2.d.ts

@@ -16,7 +16,5 @@ export declare type Heading2OwnProps = {
 };
 export declare type Heading2Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading2OwnProps, T>;
 declare const defaultElement = "h2";
-export declare const Heading2: <E extends React.ElementType<any> = "h2">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading2OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading2: <E extends React.ElementType<any> = "h2">({ margin, children, as, ...rest }: Heading2Props<E>) => JSX.Element;
 export {};

package/dist/Heading3.d.ts

@@ -16,7 +16,5 @@ export declare type Heading3OwnProps = {
 };
 export declare type Heading3Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading3OwnProps, T>;
 declare const defaultElement = "h3";
-export declare const Heading3: <E extends React.ElementType<any> = "h3">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading3OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading3: <E extends React.ElementType<any> = "h3">({ margin, children, as, ...rest }: Heading3Props<E>) => JSX.Element;
 export {};

package/dist/Heading4.d.ts

@@ -16,7 +16,5 @@ export declare type Heading4OwnProps = {
 };
 export declare type Heading4Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading4OwnProps, T>;
 declare const defaultElement = "h4";
-export declare const Heading4: <E extends React.ElementType<any> = "h4">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading4OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading4: <E extends React.ElementType<any> = "h4">({ margin, children, as, ...rest }: Heading4Props<E>) => JSX.Element;
 export {};

package/dist/Heading5.d.ts

@@ -16,7 +16,5 @@ export declare type Heading5OwnProps = {
 };
 export declare type Heading5Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading5OwnProps, T>;
 declare const defaultElement = "h5";
-export declare const Heading5: <E extends React.ElementType<any> = "h5">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading5OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading5: <E extends React.ElementType<any> = "h5">({ margin, children, as, ...rest }: Heading5Props<E>) => JSX.Element;
 export {};

package/dist/Heading6.d.ts

@@ -16,7 +16,5 @@ export declare type Heading6OwnProps = {
 };
 export declare type Heading6Props<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<Heading6OwnProps, T>;
 declare const defaultElement = "h6";
-export declare const Heading6: <E extends React.ElementType<any> = "h6">({ margin, children, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & Heading6OwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Heading6: <E extends React.ElementType<any> = "h6">({ margin, children, as, ...rest }: Heading6Props<E>) => JSX.Element;
 export {};

package/dist/Label.d.ts

@@ -16,7 +16,5 @@ export declare type LabelOwnProps = {
 };
 export declare type LabelProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<LabelOwnProps, E>;
 declare const defaultElement = "label";
-export declare const Label: <E extends React.ElementType<any> = "label">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & LabelOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Label: <E extends React.ElementType<any> = "label">({ className, margin, as, ...rest }: LabelProps<E>) => JSX.Element;
 export {};

package/dist/LeadParagraph.d.ts

@@ -16,7 +16,5 @@ export declare type LeadParagraphOwnProps = {
 };
 export declare type LeadParagraphProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<LeadParagraphOwnProps, E>;
 declare const defaultElement = "p";
-export declare const LeadParagraph: <E extends React.ElementType<any> = "p">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & LeadParagraphOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const LeadParagraph: <E extends React.ElementType<any> = "p">({ className, margin, as, ...rest }: LeadParagraphProps<E>) => JSX.Element;
 export {};

package/dist/Link.d.ts

@@ -16,7 +16,5 @@ export declare type LinkOwnProps = {
 };
 export declare type LinkProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<LinkOwnProps, E>;
 declare const defaultElement = "a";
-export declare const Link: <E extends React.ElementType<any> = "a">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & LinkOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Link: <E extends React.ElementType<any> = "a">({ className, margin, as, ...rest }: LinkProps<E>) => JSX.Element;
 export {};

package/dist/Paragraph.d.ts

@@ -16,7 +16,5 @@ export declare type ParagraphOwnProps = {
 };
 export declare type ParagraphProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<ParagraphOwnProps, E>;
 declare const defaultElement = "p";
-export declare const Paragraph: <E extends React.ElementType<any> = "p">({ margin, className, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & ParagraphOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const Paragraph: <E extends React.ElementType<any> = "p">({ margin, className, as, ...rest }: ParagraphProps<E>) => JSX.Element;
 export {};

package/dist/PreformattedText.d.ts

@@ -11,6 +11,4 @@ export declare type PreformattedTextOwnProps = {
     children: React.ReactNode;
 };
 export declare type PreformattedTextProps<E extends React.ElementType> = PolymorphicPropsWithoutRef<PreformattedTextOwnProps, E>;
-export declare const PreformattedText: <E extends React.ElementType<any> = "pre">({ className, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children">> & PreformattedTextOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const PreformattedText: <E extends React.ElementType<any> = "pre">({ className, as, ...rest }: PreformattedTextProps<E>) => JSX.Element;

package/dist/SmallText.d.ts

@@ -16,7 +16,5 @@ export declare type SmallTextOwnProps = {
 };
 export declare type SmallTextProps<T extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<SmallTextOwnProps, T>;
 declare const defaultElement = "span";
-export declare const SmallText: <E extends React.ElementType<any> = "span">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & SmallTextOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const SmallText: <E extends React.ElementType<any> = "span">({ className, margin, as, ...rest }: SmallTextProps<E>) => JSX.Element;
 export {};

package/dist/StrongText.d.ts

@@ -16,7 +16,5 @@ export declare type StrongTextOwnProps = {
 };
 export declare type StrongTextProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<StrongTextOwnProps, E>;
 declare const defaultElement = "strong";
-export declare const StrongText: <E extends React.ElementType<any> = "strong">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & StrongTextOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const StrongText: <E extends React.ElementType<any> = "strong">({ className, margin, as, ...rest }: StrongTextProps<E>) => JSX.Element;
 export {};

package/dist/SubLabel.d.ts

@@ -16,7 +16,5 @@ export declare type SubLabelOwnProps = {
 };
 export declare type SubLabelProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<SubLabelOwnProps, E>;
 declare const defaultElement = "span";
-export declare const SubLabel: <E extends React.ElementType<any> = "span">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & SubLabelOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const SubLabel: <E extends React.ElementType<any> = "span">({ className, margin, as, ...rest }: SubLabelProps<E>) => JSX.Element;
 export {};

package/dist/SubParagraph.d.ts

@@ -16,7 +16,5 @@ export declare type SubParagraphOwnProps = {
 };
 export declare type SubParagraphProps<E extends React.ElementType = typeof defaultElement> = PolymorphicPropsWithoutRef<SubParagraphOwnProps, E>;
 declare const defaultElement = "p";
-export declare const SubParagraph: <E extends React.ElementType<any> = "p">({ className, margin, as, ...rest }: Pick<React.PropsWithoutRef<React.ComponentProps<E>>, Exclude<keyof React.PropsWithoutRef<React.ComponentProps<E>>, "as" | "className" | "children" | "margin">> & SubParagraphOwnProps & {
-    as?: E | undefined;
-}) => JSX.Element;
+export declare const SubParagraph: <E extends React.ElementType<any> = "p">({ className, margin, as, ...rest }: SubParagraphProps<E>) => JSX.Element;
 export {};

package/dist/styles.css

@@ -76,11 +76,16 @@
     "Helvetica Neue", sans-serif;
 }
 html {
+  background-color: #ffffff;
   background-color: #ffffff;
   background-color: var(--primary-background-color);
   box-sizing: border-box;
   color: #181c56;
+  color: #181c56;
   color: var(--primary-text-color);
+  font-family: "Nationale", Arial, "Gotham Rounded", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif;
   font-family: var(--eds-font-family);
   font-weight: 500;
   font-size: 1rem;
@@ -107,6 +112,7 @@ html {
 .eds-h5,
 .eds-h6 {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
@@ -186,6 +192,7 @@ html {
 
 .eds-paragraph {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1rem;
   line-height: 1.5rem;
@@ -198,61 +205,9 @@ html {
   }
 }
 
-.eds-h1--margin-top,
-.eds-h2--margin-top,
-.eds-h3--margin-top,
-.eds-h4--margin-top,
-.eds-h5--margin-top,
-.eds-h6--margin-top,
-.eds-paragraph--margin-top,
-.eds-lead-paragraph--margin-top,
-.eds-sub-paragraph--margin-top,
-.eds-emphasized-text--margin-top,
-.eds-label--margin-top,
-.eds-sub-label--margin-top,
-.eds-small-text--margin-top,
-.eds-strong-text--margin-top,
-.eds-link--margin-top {
-  margin-bottom: 0;
-}
-.eds-h1--margin-bottom,
-.eds-h2--margin-bottom,
-.eds-h3--margin-bottom,
-.eds-h4--margin-bottom,
-.eds-h5--margin-bottom,
-.eds-h6--margin-bottom,
-.eds-paragraph--margin-bottom,
-.eds-lead-paragraph--margin-bottom,
-.eds-sub-paragraph--margin-bottom,
-.eds-emphasized-text--margin-bottom,
-.eds-label--margin-bottom,
-.eds-sub-label--margin-bottom,
-.eds-small-text--margin-bottom,
-.eds-strong-text--margin-bottom,
-.eds-link--margin-bottom {
-  margin-top: 0;
-}
-.eds-h1--margin-none,
-.eds-h2--margin-none,
-.eds-h3--margin-none,
-.eds-h4--margin-none,
-.eds-h5--margin-none,
-.eds-h6--margin-none,
-.eds-paragraph--margin-none,
-.eds-lead-paragraph--margin-none,
-.eds-sub-paragraph--margin-none,
-.eds-emphasized-text--margin-none,
-.eds-label--margin-none,
-.eds-sub-label--margin-none,
-.eds-small-text--margin-none,
-.eds-strong-text--margin-none,
-.eds-link--margin-none {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 .eds-lead-paragraph {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1.25rem;
   line-height: 1.875rem;
@@ -267,6 +222,7 @@ html {
 
 .eds-sub-paragraph {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -279,6 +235,7 @@ html {
 
 .eds-small-text {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.625rem;
   line-height: 1rem;
@@ -292,6 +249,7 @@ html {
 
 .eds-link, .eds-link:link, .eds-link:visited {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   font-size: inherit;
   text-decoration: none;
@@ -302,11 +260,20 @@ html {
   background-position: 0 100%;
 }
 .eds-link:hover {
-  animation: eds-link-underline 0.3s ease-in;
+  -webkit-animation: eds-link-underline 0.3s ease-in;
+          animation: eds-link-underline 0.3s ease-in;
 }
 .eds-contrast .eds-link {
   background-image: linear-gradient(120deg, #ffffff 0%, #ffffff 100%);
 }
+@-webkit-keyframes eds-link-underline {
+  from {
+    background-size: 0% 0.125rem;
+  }
+  to {
+    background-size: 100% 0.125rem;
+  }
+}
 @keyframes eds-link-underline {
   from {
     background-size: 0% 0.125rem;
@@ -332,6 +299,7 @@ html {
 
 .eds-label,
 .eds-sub-label {
+  color: #656782;
   color: #656782;
   color: var(--primary-label-color);
 }
@@ -436,6 +404,7 @@ html {
 }
 .eds-numbered-list > .eds-list-item::before {
   color: inherit;
+  color: #181c56;
   color: var(--primary-text-color);
   position: absolute;
   font-weight: 600;
@@ -476,6 +445,68 @@ html {
   text-transform: uppercase;
 }
 
+.eds-h1--margin-top,
+.eds-h2--margin-top,
+.eds-h3--margin-top,
+.eds-h4--margin-top,
+.eds-h5--margin-top,
+.eds-h6--margin-top,
+.eds-paragraph--margin-top,
+.eds-lead-paragraph--margin-top,
+.eds-sub-paragraph--margin-top,
+.eds-emphasized-text--margin-top,
+.eds-label--margin-top,
+.eds-sub-label--margin-top,
+.eds-small-text--margin-top,
+.eds-strong-text--margin-top,
+.eds-link--margin-top {
+  margin-bottom: 0;
+}
+.eds-h1--margin-bottom,
+.eds-h2--margin-bottom,
+.eds-h3--margin-bottom,
+.eds-h4--margin-bottom,
+.eds-h5--margin-bottom,
+.eds-h6--margin-bottom,
+.eds-paragraph--margin-bottom,
+.eds-lead-paragraph--margin-bottom,
+.eds-sub-paragraph--margin-bottom,
+.eds-emphasized-text--margin-bottom,
+.eds-label--margin-bottom,
+.eds-sub-label--margin-bottom,
+.eds-small-text--margin-bottom,
+.eds-strong-text--margin-bottom,
+.eds-link--margin-bottom {
+  margin-top: 0;
+}
+.eds-h1--margin-none,
+.eds-h2--margin-none,
+.eds-h3--margin-none,
+.eds-h4--margin-none,
+.eds-h5--margin-none,
+.eds-h6--margin-none,
+.eds-paragraph--margin-none,
+.eds-lead-paragraph--margin-none,
+.eds-sub-paragraph--margin-none,
+.eds-emphasized-text--margin-none,
+.eds-label--margin-none,
+.eds-sub-label--margin-none,
+.eds-small-text--margin-none,
+.eds-strong-text--margin-none,
+.eds-link--margin-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@-webkit-keyframes lineExpand {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+
 @keyframes lineExpand {
   0% {
     width: 0;