feat: display types in portal

affects: @fremtind/jkl-accordion-react, @fremtind/jkl-alert-message-react, @fremtind/jkl-button-react, @fremtind/jkl-checkbox-react, @fremtind/jkl-content-toggle-react, @fremtind/jkl-core, @fremtind/jkl-feedback-react, @fremtind/jkl-icons-react, @fremtind/jkl-image-react, @fremtind/jkl-list-react, @fremtind/jkl-portal-components, @fremtind/jkl-progress-bar-react, @fremtind/jkl-radio-button-react, @fremtind/jkl-react-hooks, @fremtind/jkl-summary-table-react, @fremtind/jkl-table-react, @fremtind/jkl-text-input-react, @fremtind/jkl-toggle-switch-react, @fremtind/portal improve responsive layout, prepare for react 17 removing unnesseary react imports
fremtind · Dec 9, 2020 · 5c62a16 · 5c62a16
1 parent 037b5c2
commit 5c62a16
Show file tree

Hide file tree

Showing 68 changed files with 379 additions and 522 deletions.
diff --git a/packages/accordion-react/src/Accordion.tsx b/packages/accordion-react/src/Accordion.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React, { FC } from "react";
 
 interface Props {
     inverted?: boolean;
     className?: string;
 }
 
-export const Accordion: React.FC<Props> = ({ children, inverted, className = "" }) => {
+export const Accordion: FC<Props> = ({ children, inverted, className = "" }) => {
     return (
         <div
             data-testid="jkl-accordion"

diff --git a/packages/accordion-react/src/ExpandArrow.tsx b/packages/accordion-react/src/ExpandArrow.tsx
@@ -1,12 +1,12 @@
-import React from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 
 interface Props {
     className?: string;
     expanded?: boolean;
 }
 
-export const ExpandArrow: React.FC<Props> = ({ expanded = false, className }) => {
+export const ExpandArrow: FC<Props> = ({ expanded = false, className }) => {
     const componentClassName = classNames(
         {
             "jkl-expand-arrow": true,

diff --git a/packages/alert-message-react/src/AlertMessage.tsx b/packages/alert-message-react/src/AlertMessage.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import classNames from "classnames";
 import { MessageIcon } from "./common/MessageIcon";
 
 type messageTypes = "info" | "error" | "success" | "warning";
 
 interface Props {
-    children: React.ReactNode;
+    children: ReactNode;
     className?: string;
     inverted?: boolean;
     maxContentWidth?: string;

diff --git a/packages/button-react/documentation/Example.tsx b/packages/button-react/documentation/Example.tsx
@@ -1,59 +1,8 @@
 import React from "react";
 import { ExampleComponentProps } from "@fremtind/jkl-portal-components";
-import { PrimaryButton, SecondaryButton, TertiaryButton } from "../src";
-import "./style.scss";
-
-function onClick() {
-    console.log("Hello!");
-}
-
-export const Primary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
-    <PrimaryButton
-        inverted={boolValues && boolValues["Invertert"]}
-        forceCompact={boolValues && boolValues["Kompakt"]}
-        loader={
-            !!boolValues?.["withLoader"]
-                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
-                : undefined
-        }
-        onClick={onClick}
-        className="jkl-spacing--right-1"
-    >
-        Send
-    </PrimaryButton>
-);
-
-export const Secondary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
-    <SecondaryButton
-        inverted={boolValues && boolValues["Invertert"]}
-        forceCompact={boolValues && boolValues["Kompakt"]}
-        loader={
-            !!boolValues?.["withLoader"]
-                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
-                : undefined
-        }
-        onClick={onClick}
-        className="jkl-spacing--right-1"
-    >
-        Gå videre
-    </SecondaryButton>
-);
-
-export const Tertiary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
-    <TertiaryButton
-        inverted={boolValues && boolValues["Invertert"]}
-        forceCompact={boolValues && boolValues["Kompakt"]}
-        loader={
-            !!boolValues?.["withLoader"]
-                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
-                : undefined
-        }
-        onClick={onClick}
-        className="jkl-spacing--right-1"
-    >
-        Avbryt
-    </TertiaryButton>
-);
+import { Primary } from "./Primary";
+import { Secondary } from "./Secondary";
+import { Tertiary } from "./Tertiary";
 
 export const Example: React.FC<ExampleComponentProps> = ({ boolValues }) => {
     return (

diff --git a/packages/button-react/documentation/Primary.tsx b/packages/button-react/documentation/Primary.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { ExampleComponentProps } from "@fremtind/jkl-portal-components";
+import { PrimaryButton } from "../src";
+
+function onClick() {
+    console.log("Hello!");
+}
+
+export const Primary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
+    <PrimaryButton
+        inverted={boolValues && boolValues["Invertert"]}
+        forceCompact={boolValues && boolValues["Kompakt"]}
+        loader={
+            !!boolValues?.["withLoader"]
+                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+                : undefined
+        }
+        onClick={onClick}
+        className="jkl-spacing--right-1"
+    >
+        Avbryt
+    </PrimaryButton>
+);
+
+export const PrimaryCode = `
+<PrimaryButton
+    inverted={boolValues && boolValues["Invertert"]}
+    forceCompact={boolValues && boolValues["Kompakt"]}
+    loader={
+        !!boolValues?.["withLoader"]
+            ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+            : undefined
+    }
+    onClick={onClick}
+    className="jkl-spacing--right-1"
+>
+    Avbryt
+</PrimaryButton>
+`;
diff --git a/packages/button-react/documentation/Secondary.tsx b/packages/button-react/documentation/Secondary.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { ExampleComponentProps } from "@fremtind/jkl-portal-components";
+import { SecondaryButton } from "../src";
+
+function onClick() {
+    console.log("Hello!");
+}
+
+export const Secondary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
+    <SecondaryButton
+        inverted={boolValues && boolValues["Invertert"]}
+        forceCompact={boolValues && boolValues["Kompakt"]}
+        loader={
+            !!boolValues?.["withLoader"]
+                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+                : undefined
+        }
+        onClick={onClick}
+        className="jkl-spacing--right-1"
+    >
+        Avbryt
+    </SecondaryButton>
+);
+
+export const SecondaryCode = `
+<SecondaryButton
+    inverted={boolValues && boolValues["Invertert"]}
+    forceCompact={boolValues && boolValues["Kompakt"]}
+    loader={
+        !!boolValues?.["withLoader"]
+            ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+            : undefined
+    }
+    onClick={onClick}
+    className="jkl-spacing--right-1"
+>
+    Avbryt
+</SecondaryButton>
+`;
diff --git a/packages/button-react/documentation/Tertiary.tsx b/packages/button-react/documentation/Tertiary.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { ExampleComponentProps } from "@fremtind/jkl-portal-components";
+import { TertiaryButton } from "../src";
+
+function onClick() {
+    console.log("Hello!");
+}
+
+export const Tertiary: React.FC<ExampleComponentProps> = ({ boolValues }) => (
+    <TertiaryButton
+        inverted={boolValues && boolValues["Invertert"]}
+        forceCompact={boolValues && boolValues["Kompakt"]}
+        loader={
+            !!boolValues?.["withLoader"]
+                ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+                : undefined
+        }
+        onClick={onClick}
+        className="jkl-spacing--right-1"
+    >
+        Avbryt
+    </TertiaryButton>
+);
+
+export const TertiaryCode = `
+<TertiaryButton
+    inverted={boolValues && boolValues["Invertert"]}
+    forceCompact={boolValues && boolValues["Kompakt"]}
+    loader={
+        !!boolValues?.["withLoader"]
+            ? { showLoader: !!boolValues?.["isLoading"], textDescription: "Laster innhold" }
+            : undefined
+    }
+    onClick={onClick}
+    className="jkl-spacing--right-1"
+>
+    Avbryt
+</TertiaryButton>
+`;
diff --git a/packages/button-react/documentation/buttons.mdx b/packages/button-react/documentation/buttons.mdx
@@ -5,7 +5,10 @@ react: button-react
 group: knapper
 ---
 
-import { Primary, Secondary, Tertiary } from "./Example";
+import { Primary, PrimaryCode } from "./Primary";
+import { Secondary, SecondaryCode } from "./Secondary";
+import { Tertiary, TertiaryCode } from "./Tertiary";
+
 import { PrimaryButton, SecondaryButton, TertiaryButton } from "../src";
 
 <Ingress>
@@ -14,15 +17,21 @@ import { PrimaryButton, SecondaryButton, TertiaryButton } from "../src";
 
 **Primærknapp:** brukes til den viktigste handlingen på en side - hovedhandlingen. En side kan noen ganger ha mer enn en hovedhandling, men ikke mange.
 
-<ComponentExample component={Primary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }} />
+<ComponentExample component={Primary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }}>
+    <CodeDemo code={PrimaryCode} />
+</ComponentExample>
 
 **Sekundærknapp:** brukes til handlinger som ikke er like viktige for oss eller brukeren.
 
-<ComponentExample component={Secondary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }} />
+<ComponentExample component={Secondary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }}>
+    <CodeDemo code={SecondaryCode} />
+</ComponentExample>
 
 **Tertiærknapp:** brukes til handlinger som er mindre viktige, eller som kan gi uønskede konsekvenser.
 
-<ComponentExample component={Tertiary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }} />
+<ComponentExample component={Tertiary} knobs={{ boolProps: ["Kompakt", "Invertert", "isLoading", 'withLoader'] }}>
+    <CodeDemo code={TertiaryCode} />
+</ComponentExample>
 
 ## Lastemodus
 

diff --git a/packages/checkbox-react/src/Checkbox.tsx b/packages/checkbox-react/src/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useState, forwardRef, ChangeEventHandler, FocusEventHandler } from "react";
 import classNames from "classnames";
 import { nanoid } from "nanoid";
 
@@ -12,12 +12,12 @@ interface Props {
     forceCompact?: boolean;
     invalid?: boolean;
     inverted?: boolean;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
 }
 
-export const Checkbox = React.forwardRef<HTMLInputElement, Props>(
+export const Checkbox = forwardRef<HTMLInputElement, Props>(
     (
         {
             children,

diff --git a/packages/content-toggle-react/src/ContentToggle.tsx b/packages/content-toggle-react/src/ContentToggle.tsx
@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, FC } from "react";
 import cn from "classnames";
 
-export const ContentToggle: React.FC<{
+export const ContentToggle: FC<{
     showSecondary: boolean;
     secondary: ReactNode;
     className?: string;

diff --git a/packages/core/src/components/Label.tsx b/packages/core/src/components/Label.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import { LabelVariant } from "../index";
 import classNames from "classnames";
 
@@ -11,7 +11,7 @@ interface Props {
     className?: string;
 }
 
-export const Label: React.FC<Props> = ({
+export const Label: FC<Props> = ({
     variant = "medium",
     forceCompact,
     srOnly,

diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -1,12 +1,12 @@
-import React, { AnchorHTMLAttributes } from "react";
+import React, { AnchorHTMLAttributes, FC } from "react";
 import classnames from "classnames";
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
     negative?: boolean;
     external?: boolean;
 }
 
-export const Link: React.FC<Props> = ({ negative = false, external = false, className = "", children, ...rest }) => (
+export const Link: FC<Props> = ({ negative = false, external = false, className = "", children, ...rest }) => (
     <a
         className={classnames("jkl-link", className, {
             "jkl-link--negative": negative,

diff --git a/packages/core/src/components/NavLink.tsx b/packages/core/src/components/NavLink.tsx
@@ -1,12 +1,12 @@
-import React, { AnchorHTMLAttributes } from "react";
+import React, { AnchorHTMLAttributes, FC } from "react";
 import classnames from "classnames";
 
 interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
     inverted?: boolean;
     active?: boolean;
 }
 
-export const NavLink: React.FC<Props> = ({ inverted = false, active = false, className = "", children, ...rest }) => (
+export const NavLink: FC<Props> = ({ inverted = false, active = false, className = "", children, ...rest }) => (
     <a
         className={classnames(
             "jkl-nav-link",

diff --git a/packages/core/src/components/SupportLabel.tsx b/packages/core/src/components/SupportLabel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 
 interface Props {
@@ -11,15 +11,7 @@ interface Props {
     inverted?: boolean;
 }
 
-export const SupportLabel: React.FC<Props> = ({
-    id,
-    helpLabel,
-    errorLabel,
-    forceCompact,
-    className,
-    srOnly,
-    inverted,
-}) => {
+export const SupportLabel: FC<Props> = ({ id, helpLabel, errorLabel, forceCompact, className, srOnly, inverted }) => {
     const componentClassName = classNames("jkl-form-support-label", className, {
         "jkl-form-support-label--compact": forceCompact,
         "jkl-form-support-label--error": errorLabel,

diff --git a/packages/feedback-react/src/BaseFeedback.tsx b/packages/feedback-react/src/BaseFeedback.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from "react";
+import React, { createContext, useCallback, useEffect, useState, FC } from "react";
 import cn from "classnames";
 import { TextArea } from "@fremtind/jkl-text-input-react";
 import { SecondaryButton } from "@fremtind/jkl-button-react";
@@ -30,7 +30,7 @@ export const FeedbackContext = createContext<{
     setValue: (next: FeedbackValue) => void;
 }>({ options: [], setValue: () => undefined });
 
-export const BaseFeedback: React.FC<BaseFeedbackProps> = ({
+export const BaseFeedback: FC<BaseFeedbackProps> = ({
     label,
     onSubmit,
     description,

diff --git a/packages/feedback-react/src/Feedback.tsx b/packages/feedback-react/src/Feedback.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useContext, useState } from "react";
+import React, { Fragment, useContext, useState, FC } from "react";
 import { ScreenReaderOnly } from "@fremtind/jkl-core";
 import { Smiley } from "./Smiley";
 import { BaseFeedback, BaseFeedbackProps, FeedbackContext } from "./BaseFeedback";
@@ -35,7 +35,7 @@ const FeedbackContent = () => {
     );
 };
 
-export const Feedback: React.FC<BaseFeedbackProps> = (props) => {
+export const Feedback: FC<BaseFeedbackProps> = (props) => {
     return (
         <BaseFeedback {...props}>
             <FeedbackContent />