@entur/typography 1.9.12 → 1.9.13-beta.1

package/dist/index.d.ts

@@ -1,22 +1,426 @@
-import './index.scss';
-export * from './Blockquote';
-export * from './CodeText';
-export * from './EmphasizedText';
-export * from './Heading1';
-export * from './Heading2';
-export * from './Heading3';
-export * from './Heading4';
-export * from './Heading5';
-export * from './Heading6';
-export * from './Label';
-export * from './LeadParagraph';
-export * from './Link';
-export * from './ListItem';
-export * from './NumberedList';
-export * from './Paragraph';
-export * from './PreformattedText';
-export * from './SmallText';
-export * from './StrongText';
-export * from './SubLabel';
-export * from './SubParagraph';
-export * from './UnorderedList';
+import { default as default_2 } from 'react';
+
+declare type AsProp<C extends default_2.ElementType> = {
+    /**
+     * An override of the default HTML tag.
+     * Can also be another React component.
+     */
+    as?: C;
+};
+
+export declare const Blockquote: ({ className, ref, ...rest }: BlockquoteProps) => default_2.JSX.Element;
+
+export declare const BlockquoteFooter: default_2.FunctionComponent<BlockquoteFooterProps>;
+
+declare type BlockquoteFooterProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+declare type BlockquoteProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+} & default_2.DetailedHTMLProps<default_2.BlockquoteHTMLAttributes<HTMLElement>, HTMLQuoteElement>;
+
+export declare const CodeText: <E extends default_2.ElementType = "code">({ className, as, ...rest }: CodeTextProps<E>) => JSX.Element;
+
+export declare type CodeTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "code"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+};
+
+export declare type CodeTextProps<T extends default_2.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, CodeTextOwnProps>;
+
+declare const defaultElement = "code";
+
+declare const defaultElement_10 = "p";
+
+declare const defaultElement_11 = "a";
+
+declare const defaultElement_12 = "p";
+
+declare const defaultElement_13 = "span";
+
+declare const defaultElement_14 = "strong";
+
+declare const defaultElement_15 = "span";
+
+declare const defaultElement_16 = "p";
+
+declare const defaultElement_2 = "em";
+
+declare const defaultElement_3 = "h1";
+
+declare const defaultElement_4 = "h2";
+
+declare const defaultElement_5 = "h3";
+
+declare const defaultElement_6 = "h4";
+
+declare const defaultElement_7 = "h5";
+
+declare const defaultElement_8 = "h6";
+
+declare const defaultElement_9 = "label";
+
+export declare const EmphasizedText: <E extends default_2.ElementType = "em">({ className, margin, as, ...rest }: EmphasizedTextProps<E>) => JSX.Element;
+
+export declare type EmphasizedTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "em"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type EmphasizedTextProps<T extends default_2.ElementType = typeof defaultElement_2> = PolymorphicComponentProps<T, EmphasizedTextOwnProps>;
+
+/**
+ * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
+ * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
+ * set of props.
+ */
+declare type ExtendableProps<ExtendedProps = Record<string, unknown>, OverrideProps = Record<string, unknown>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
+
+export declare const Heading1: <E extends default_2.ElementType = "h1">({ margin, children, as, ...rest }: Heading1Props<E>) => JSX.Element;
+
+export declare type Heading1OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h1"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading1Props<T extends default_2.ElementType = typeof defaultElement_3> = PolymorphicComponentProps<T, Heading1OwnProps>;
+
+export declare const Heading2: <E extends default_2.ElementType = "h2">({ margin, children, as, ...rest }: Heading2Props<E>) => JSX.Element;
+
+export declare type Heading2OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h2"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading2Props<T extends default_2.ElementType = typeof defaultElement_4> = PolymorphicComponentProps<T, Heading2OwnProps>;
+
+export declare const Heading3: <E extends default_2.ElementType = "h3">({ margin, children, as, ...rest }: Heading3Props<E>) => JSX.Element;
+
+export declare type Heading3OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h3"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading3Props<T extends default_2.ElementType = typeof defaultElement_5> = PolymorphicComponentProps<T, Heading3OwnProps>;
+
+export declare const Heading4: <E extends default_2.ElementType = "h4">({ margin, children, as, ...rest }: Heading4Props<E>) => JSX.Element;
+
+export declare type Heading4OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h4"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading4Props<T extends default_2.ElementType = typeof defaultElement_6> = PolymorphicComponentProps<T, Heading4OwnProps>;
+
+export declare const Heading5: <E extends default_2.ElementType = "h5">({ margin, children, as, ...rest }: Heading5Props<E>) => JSX.Element;
+
+export declare type Heading5OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h5"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading5Props<T extends default_2.ElementType = typeof defaultElement_7> = PolymorphicComponentProps<T, Heading5OwnProps>;
+
+export declare const Heading6: <E extends default_2.ElementType = "h6">({ margin, children, as, ...rest }: Heading6Props<E>) => JSX.Element;
+
+export declare type Heading6OwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "h6"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type Heading6Props<T extends default_2.ElementType = typeof defaultElement_8> = PolymorphicComponentProps<T, Heading6OwnProps>;
+
+/**
+ * Allows for inheriting the props from the specified element type so that
+ * props like children, className & style work, as well as element-specific
+ * attributes like aria roles. The component (`C`) must be passed in.
+ */
+declare type InheritableElementProps<C extends default_2.ElementType, Props = Record<string, unknown>> = ExtendableProps<PropsOf<C>, Props>;
+
+export declare const Label: <E extends default_2.ElementType = "label">({ className, margin, as, ...rest }: LabelProps<E>) => JSX.Element;
+
+export declare type LabelOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "label"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type LabelProps<T extends default_2.ElementType = typeof defaultElement_9> = PolymorphicComponentProps<T, LabelOwnProps>;
+
+export declare const LeadParagraph: <E extends default_2.ElementType = "p">({ className, margin, as, ...rest }: LeadParagraphProps<E>) => JSX.Element;
+
+export declare type LeadParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type LeadParagraphProps<T extends default_2.ElementType = typeof defaultElement_10> = PolymorphicComponentProps<T, LeadParagraphOwnProps>;
+
+export declare const Link: <E extends default_2.ElementType = "a">({ external, ariaLabelExternalIcon, className, margin, children, as, ...rest }: LinkProps<E>) => JSX.Element;
+
+export declare type LinkOwnProps = {
+    external?: boolean;
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "a"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+    ariaLabelExternalIcon?: string;
+};
+
+export declare type LinkProps<T extends default_2.ElementType = typeof defaultElement_11> = PolymorphicComponentProps<T, LinkOwnProps>;
+
+export declare const ListItem: default_2.FC<ListItemProps>;
+
+export declare type ListItemProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Tittel */
+    title?: default_2.ReactNode;
+    [key: string]: any;
+};
+
+export declare const NumberedList: default_2.FC<NumberedListProps>;
+
+export declare type NumberedListProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+} & default_2.OlHTMLAttributes<HTMLOListElement>;
+
+export declare const Paragraph: <E extends default_2.ElementType = "p">({ margin, className, as, ...rest }: ParagraphProps<E>) => JSX.Element;
+
+export declare type ParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "bottom"
+     */
+    margin?: 'bottom' | 'none';
+};
+
+export declare type ParagraphProps<T extends default_2.ElementType = typeof defaultElement_12> = PolymorphicComponentProps<T, ParagraphOwnProps>;
+
+/**
+ * A more sophisticated version of `InheritableElementProps` where
+ * the passed in `as` prop will determine which props can be included
+ */
+declare type PolymorphicComponentProps<C extends default_2.ElementType, Props = Record<string, unknown>> = InheritableElementProps<C, Props & AsProp<C>>;
+
+export declare const PreformattedText: <E extends default_2.ElementType = "pre">({ className, as, ...rest }: PreformattedTextProps<E>) => JSX.Element;
+
+export declare type PreformattedTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "pre"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+};
+
+export declare type PreformattedTextProps<T extends default_2.ElementType> = PolymorphicComponentProps<T, PreformattedTextOwnProps>;
+
+declare type PropsOf<C extends keyof JSX.IntrinsicElements | default_2.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, default_2.ComponentPropsWithoutRef<C>>;
+
+export declare const SmallText: <E extends default_2.ElementType = "span">({ className, margin, as, ...rest }: SmallTextProps<E>) => JSX.Element;
+
+export declare type SmallTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "span"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type SmallTextProps<T extends default_2.ElementType = typeof defaultElement_13> = PolymorphicComponentProps<T, SmallTextOwnProps>;
+
+export declare const StrongText: <E extends default_2.ElementType = "strong">({ className, margin, as, ...rest }: StrongTextProps<E>) => JSX.Element;
+
+export declare type StrongTextOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "strong"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type StrongTextProps<T extends default_2.ElementType = typeof defaultElement_14> = PolymorphicComponentProps<T, StrongTextOwnProps>;
+
+export declare const SubLabel: <E extends default_2.ElementType = "span">({ className, margin, as, ...rest }: SubLabelProps<E>) => JSX.Element;
+
+export declare type SubLabelOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "span"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type SubLabelProps<T extends default_2.ElementType = typeof defaultElement_15> = PolymorphicComponentProps<T, SubLabelOwnProps>;
+
+export declare const SubParagraph: <E extends default_2.ElementType = "p">({ className, margin, as, ...rest }: SubParagraphProps<E>) => JSX.Element;
+
+export declare type SubParagraphOwnProps = {
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default "p"
+     */
+    as?: string | default_2.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+    /** Hvor du vil ha marginer
+     * @default "both"
+     */
+    margin?: 'top' | 'bottom' | 'both' | 'none';
+};
+
+export declare type SubParagraphProps<T extends default_2.ElementType = typeof defaultElement_16> = PolymorphicComponentProps<T, SubParagraphOwnProps>;
+
+export declare const UnorderedList: default_2.FC<UnorderedListProps>;
+
+export declare type UnorderedListProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Innholdet */
+    children: default_2.ReactNode;
+} & default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLUListElement>, HTMLUListElement>;
+
+export { }

package/dist/styles.css

@@ -268,9 +268,7 @@
   --eds-font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
     "Helvetica Neue", sans-serif;
   box-sizing: border-box;
-  color: #181c56;
   color: var(--primary-text-color);
-  background-color: #ffffff;
   background-color: var(--primary-background-color);
   font-family: "Nationale", Arial, "Gotham Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-weight: 500;
@@ -283,9 +281,7 @@
   --primary-background-color: var(--basecolors-frame-contrast);
   --primary-text-color: var(--components-typography-basetext-contrast-text-accent);
   --primary-label-color: var(--components-typography-label-contrast-text-accent);
-  color: #ffffff;
   color: var(--primary-text-color);
-  background-color: #181c56;
   background-color: var(--primary-background-color);
 }
 @media screen and (min-width: 50rem) {
@@ -310,7 +306,6 @@
 .eds-h4,
 .eds-h5,
 .eds-h6 {
-  color: #181c56;
   color: var(--primary-text-color);
   font-weight: 600;
   -webkit-font-smoothing: antialiased;
@@ -389,7 +384,6 @@
 }
 
 .eds-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1rem;
   line-height: 1.5rem;
@@ -403,7 +397,6 @@
 }
 
 .eds-lead-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 1.25rem;
   line-height: 1.875rem;
@@ -417,7 +410,6 @@
 }
 
 .eds-sub-paragraph {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -429,7 +421,6 @@
 }
 
 .eds-small-text {
-  color: #181c56;
   color: var(--primary-text-color);
   font-size: 0.625rem;
   line-height: 1rem;
@@ -442,15 +433,12 @@
 }
 
 .eds-link {
-  color: #181c56;
   color: var(--primary-text-color);
 }
 .eds-link, .eds-link:link, .eds-link:visited {
   font-size: inherit;
-  -webkit-text-decoration: none;
   text-decoration: none;
   position: relative;
-  background-image: linear-gradient(120deg, #181c56 0%, #181c56 100%);
   background-image: linear-gradient(120deg, var(--primary-text-color) 0%, var(--primary-text-color) 100%);
   background-repeat: no-repeat;
   background-size: 100% 0.125rem;
@@ -470,12 +458,10 @@
 }
 .eds-link:focus-visible {
   outline: 2px solid #181c56;
-  outline-color: #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);
   outline-offset: 0.125rem;
 }
 .eds-contrast .eds-link:focus-visible {
-  outline-color: #aeb7e2;
   outline-color: var(--basecolors-stroke-focus-contrast);
 }
 @media screen and (min-width: 50rem) {
@@ -493,7 +479,6 @@ p .eds-link--ext-icon {
 
 .eds-label,
 .eds-sub-label {
-  color: #626493;
   color: var(--primary-label-color);
 }
 
@@ -527,12 +512,9 @@ p .eds-link--ext-icon {
 
 .eds-preformatted-text,
 .eds-code-text {
-  background-color: #f6f6f9;
   background-color: var(--components-typography-codetext-standard-fill);
-  border: 0.0625rem solid rgba(84, 86, 140, 0.4);
   border: 0.0625rem solid var(--components-typography-codetext-standard-border);
   border-radius: 0.25rem;
-  color: #181c56;
   color: var(--components-typography-codetext-standard-text);
   font-family: "Monaco", monospace;
   font-size: 0.875rem;
@@ -547,7 +529,7 @@ p .eds-link--ext-icon {
 .eds-code-text {
   display: inline-block;
   word-wrap: break-word;
-  word-wrap: anywhere;
+  overflow-wrap: anywhere;
   padding: 0.125rem 0.25rem;
 }
 
@@ -561,7 +543,6 @@ p .eds-link--ext-icon {
 }
 .eds-unordered-list .eds-list-item::before {
   content: "";
-  background: #aeb7e2;
   background: var(--components-typography-list-standard-border);
   display: block;
   height: 0.125rem;
@@ -601,12 +582,10 @@ p .eds-link--ext-icon {
   position: relative;
 }
 .eds-numbered-list > .eds-list-item::before {
-  color: #181c56;
   color: var(--primary-text-color);
   position: absolute;
   font-weight: 600;
   left: -2.5rem;
-  border: 0.125rem solid #aeb7e2;
   border: 0.125rem solid var(--components-typography-list-standard-border);
   border-radius: 50%;
   height: 2rem;
@@ -627,7 +606,6 @@ p .eds-link--ext-icon {
 }
 
 .eds-blockquote {
-  border-left: 0.25rem solid #8284ab;
   border-left: 0.25rem solid var(--components-typography-blockquote-standard-stroke);
   font-family: inherit;
   font-size: 1.25rem;
@@ -704,4 +682,4 @@ p .eds-link--ext-icon {
   100% {
     width: 100%;
   }
-}
+}