From 5c62a161c278d3a5a136741aea8dcf9b62338bda Mon Sep 17 00:00:00 2001 From: Leiv Fredrik Berge Date: Wed, 9 Dec 2020 16:44:00 +0100 Subject: [PATCH] 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 --- packages/accordion-react/src/Accordion.tsx | 4 +- packages/accordion-react/src/ExpandArrow.tsx | 4 +- .../alert-message-react/src/AlertMessage.tsx | 4 +- .../button-react/documentation/Example.tsx | 57 +--- .../button-react/documentation/Primary.tsx | 39 +++ .../button-react/documentation/Secondary.tsx | 39 +++ .../button-react/documentation/Tertiary.tsx | 39 +++ .../button-react/documentation/buttons.mdx | 17 +- packages/checkbox-react/src/Checkbox.tsx | 10 +- .../src/ContentToggle.tsx | 4 +- packages/core/src/components/Label.tsx | 4 +- packages/core/src/components/Link.tsx | 4 +- packages/core/src/components/NavLink.tsx | 4 +- packages/core/src/components/SupportLabel.tsx | 12 +- packages/feedback-react/src/BaseFeedback.tsx | 4 +- packages/feedback-react/src/Feedback.tsx | 4 +- .../feedback-react/src/SimplifiedFeedback.tsx | 8 +- packages/feedback-react/src/Smiley.tsx | 4 +- packages/icons-react/src/IconFactory.tsx | 4 +- .../ArrowHorizontalAnimated.tsx | 4 +- .../animated-icons/ArrowVerticalAnimated.tsx | 4 +- .../animated-icons/HamburgerCloseAnimated.tsx | 6 +- .../src/animated-icons/PlusRemoveAnimated.tsx | 4 +- packages/icons-react/src/icons/ArrowDown.tsx | 4 +- packages/icons-react/src/icons/ArrowLeft.tsx | 4 +- packages/icons-react/src/icons/ArrowRight.tsx | 4 +- packages/icons-react/src/icons/ArrowUp.tsx | 4 +- .../icons-react/src/icons/ArrowUpRight.tsx | 4 +- packages/icons-react/src/icons/Calendar.tsx | 4 +- packages/icons-react/src/icons/CheckMark.tsx | 4 +- packages/icons-react/src/icons/Close.tsx | 4 +- packages/icons-react/src/icons/Error.tsx | 4 +- packages/icons-react/src/icons/Hamburger.tsx | 4 +- packages/icons-react/src/icons/Info.tsx | 4 +- packages/icons-react/src/icons/Plus.tsx | 4 +- packages/icons-react/src/icons/Search.tsx | 4 +- packages/icons-react/src/icons/Success.tsx | 4 +- packages/icons-react/src/icons/Warning.tsx | 4 +- packages/image-react/src/Image.tsx | 4 +- packages/list-react/src/List.tsx | 4 +- packages/list-react/src/ListItem.tsx | 6 +- .../portal-components/component-example.scss | 29 +-- .../src/ComponentExample.tsx | 12 +- packages/portal-components/src/DevExample.tsx | 4 +- .../portal-components/src/ExampleBase.tsx | 30 ++- .../portal-components/src/FlowExample.tsx | 4 +- .../src/ResponsiveExample.tsx | 4 +- .../src/internal/Devices.tsx | 18 +- .../portal-components/src/internal/Ipad.tsx | 42 --- .../portal-components/src/internal/Iphone.tsx | 245 ------------------ .../progress-bar-react/src/ProgressBar.tsx | 4 +- .../src/RadioButtonOption.tsx | 4 +- packages/react-hooks/src/useClickOutside.ts | 4 +- packages/react-hooks/src/useFocusOutside.ts | 4 +- .../summary-table-react/src/SummaryTable.tsx | 4 +- packages/table-react/src/TableData.tsx | 4 +- .../src/autosuggest/ControllerButton.tsx | 4 +- .../toggle-switch-react/src/ToggleSlider.tsx | 11 +- portal/gatsby-node.js | 32 ++- portal/package.json | 3 +- portal/src/components/Card/Card.tsx | 4 +- portal/src/components/Card/CardList.tsx | 4 +- portal/src/components/CodeDemo/CodeDemo.tsx | 12 + .../components/Header/useNavigationLinks.tsx | 19 ++ .../src/components/Layout/DocPageLayout.tsx | 25 +- .../components/Typography/FormatProvider.tsx | 2 + .../src/components/Typography/Typography.tsx | 11 +- yarn.lock | 5 + 68 files changed, 379 insertions(+), 522 deletions(-) create mode 100644 packages/button-react/documentation/Primary.tsx create mode 100644 packages/button-react/documentation/Secondary.tsx create mode 100644 packages/button-react/documentation/Tertiary.tsx delete mode 100644 packages/portal-components/src/internal/Ipad.tsx delete mode 100644 packages/portal-components/src/internal/Iphone.tsx create mode 100644 portal/src/components/CodeDemo/CodeDemo.tsx diff --git a/packages/accordion-react/src/Accordion.tsx b/packages/accordion-react/src/Accordion.tsx index 43a6ce74bb7..b6cd943d550 100644 --- 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 = ({ children, inverted, className = "" }) => { +export const Accordion: FC = ({ children, inverted, className = "" }) => { return (
= ({ expanded = false, className }) => { +export const ExpandArrow: FC = ({ 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 index ffd8abd6ea0..c4b3507c78f 100644 --- 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 index baca27bb619..dbd32ba33bb 100644 --- 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 = ({ boolValues }) => ( - - Send - -); - -export const Secondary: React.FC = ({ boolValues }) => ( - - Gå videre - -); - -export const Tertiary: React.FC = ({ boolValues }) => ( - - Avbryt - -); +import { Primary } from "./Primary"; +import { Secondary } from "./Secondary"; +import { Tertiary } from "./Tertiary"; export const Example: React.FC = ({ boolValues }) => { return ( diff --git a/packages/button-react/documentation/Primary.tsx b/packages/button-react/documentation/Primary.tsx new file mode 100644 index 00000000000..1102ddee624 --- /dev/null +++ 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 = ({ boolValues }) => ( + + Avbryt + +); + +export const PrimaryCode = ` + + Avbryt + +`; diff --git a/packages/button-react/documentation/Secondary.tsx b/packages/button-react/documentation/Secondary.tsx new file mode 100644 index 00000000000..2eeb0846a3a --- /dev/null +++ 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 = ({ boolValues }) => ( + + Avbryt + +); + +export const SecondaryCode = ` + + Avbryt + +`; diff --git a/packages/button-react/documentation/Tertiary.tsx b/packages/button-react/documentation/Tertiary.tsx new file mode 100644 index 00000000000..5082731b931 --- /dev/null +++ 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 = ({ boolValues }) => ( + + Avbryt + +); + +export const TertiaryCode = ` + + Avbryt + +`; diff --git a/packages/button-react/documentation/buttons.mdx b/packages/button-react/documentation/buttons.mdx index 4f27fcaecc2..b17b3007217 100644 --- 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"; @@ -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. - + + + **Sekundærknapp:** brukes til handlinger som ikke er like viktige for oss eller brukeren. - + + + **Tertiærknapp:** brukes til handlinger som er mindre viktige, eller som kan gi uønskede konsekvenser. - + + + ## Lastemodus diff --git a/packages/checkbox-react/src/Checkbox.tsx b/packages/checkbox-react/src/Checkbox.tsx index 39e6a0b5a11..2c8248314d2 100644 --- 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; - onFocus?: React.FocusEventHandler; - onBlur?: React.FocusEventHandler; + onChange?: ChangeEventHandler; + onFocus?: FocusEventHandler; + onBlur?: FocusEventHandler; } -export const Checkbox = React.forwardRef( +export const Checkbox = forwardRef( ( { children, diff --git a/packages/content-toggle-react/src/ContentToggle.tsx b/packages/content-toggle-react/src/ContentToggle.tsx index 118ed6c6ddd..f1e7fe35a5e 100644 --- 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 index 63d5bec686c..48d2cca2bca 100644 --- 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 = ({ +export const Label: FC = ({ variant = "medium", forceCompact, srOnly, diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx index 087548fb70f..7cd4f2eace9 100644 --- a/packages/core/src/components/Link.tsx +++ b/packages/core/src/components/Link.tsx @@ -1,4 +1,4 @@ -import React, { AnchorHTMLAttributes } from "react"; +import React, { AnchorHTMLAttributes, FC } from "react"; import classnames from "classnames"; interface Props extends AnchorHTMLAttributes { @@ -6,7 +6,7 @@ interface Props extends AnchorHTMLAttributes { external?: boolean; } -export const Link: React.FC = ({ negative = false, external = false, className = "", children, ...rest }) => ( +export const Link: FC = ({ negative = false, external = false, className = "", children, ...rest }) => ( { @@ -6,7 +6,7 @@ interface Props extends AnchorHTMLAttributes { active?: boolean; } -export const NavLink: React.FC = ({ inverted = false, active = false, className = "", children, ...rest }) => ( +export const NavLink: FC = ({ inverted = false, active = false, className = "", children, ...rest }) => ( = ({ - id, - helpLabel, - errorLabel, - forceCompact, - className, - srOnly, - inverted, -}) => { +export const SupportLabel: FC = ({ 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 index 6487e339fe5..8928374059f 100644 --- 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 = ({ +export const BaseFeedback: FC = ({ label, onSubmit, description, diff --git a/packages/feedback-react/src/Feedback.tsx b/packages/feedback-react/src/Feedback.tsx index a442d6e3db2..6cc2b8a8ce6 100644 --- 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 = (props) => { +export const Feedback: FC = (props) => { return ( diff --git a/packages/feedback-react/src/SimplifiedFeedback.tsx b/packages/feedback-react/src/SimplifiedFeedback.tsx index 1ff105918c1..3acd0cdab18 100644 --- a/packages/feedback-react/src/SimplifiedFeedback.tsx +++ b/packages/feedback-react/src/SimplifiedFeedback.tsx @@ -1,9 +1,9 @@ -import React, { useContext } from "react"; +import React, { useContext, FC } from "react"; import { RadioButtons } from "@fremtind/jkl-radio-button-react"; import { BaseFeedback, BaseFeedbackProps, FeedbackContext } from "./BaseFeedback"; import { FeedbackValue } from "./types"; -const FeedbackContent: React.FC<{ legend: string }> = ({ legend }) => { +const FeedbackContent: FC<{ legend: string }> = ({ legend }) => { const { options, value, setValue } = useContext(FeedbackContext); return ( @@ -18,11 +18,11 @@ const FeedbackContent: React.FC<{ legend: string }> = ({ legend }) => { ); }; -interface SimplifiedFeedbackProps extends Omit { +export interface SimplifiedFeedbackProps extends Omit { description: string; } -export const SimplifiedFeedback: React.FC = ({ description, ...rest }) => { +export const SimplifiedFeedback = ({ description, ...rest }: SimplifiedFeedbackProps) => { return ( diff --git a/packages/feedback-react/src/Smiley.tsx b/packages/feedback-react/src/Smiley.tsx index b9d8738496e..84e52b9d5f6 100644 --- a/packages/feedback-react/src/Smiley.tsx +++ b/packages/feedback-react/src/Smiley.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { FeedbackValue } from "./types"; const getSmiley = (element: FeedbackValue) => { @@ -16,7 +16,7 @@ const getSmiley = (element: FeedbackValue) => { } }; -export const Smiley: React.FC<{ element: FeedbackValue }> = ({ element }) => ( +export const Smiley: FC<{ element: FeedbackValue }> = ({ element }) => ( = ({ +export const IconFactory: FC = ({ viewBox = "0 0 20 21", variant = "inherit", className = "", diff --git a/packages/icons-react/src/animated-icons/ArrowHorizontalAnimated.tsx b/packages/icons-react/src/animated-icons/ArrowHorizontalAnimated.tsx index b26ff3d685b..514c64e78ba 100644 --- a/packages/icons-react/src/animated-icons/ArrowHorizontalAnimated.tsx +++ b/packages/icons-react/src/animated-icons/ArrowHorizontalAnimated.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { ArrowLeft } from "../icons/ArrowLeft"; import { ArrowRight } from "../icons/ArrowRight"; import { variants } from "../icons/types"; @@ -8,7 +8,7 @@ interface Props { variant?: variants; } -export const ArrowHorizontalAnimated: React.FC = ({ pointingRight, variant = "small" }) => { +export const ArrowHorizontalAnimated: FC = ({ pointingRight, variant = "small" }) => { const iconSize = variant !== "inherit" ? variant : "small"; return (
diff --git a/packages/icons-react/src/animated-icons/ArrowVerticalAnimated.tsx b/packages/icons-react/src/animated-icons/ArrowVerticalAnimated.tsx index bac9b4bab72..30b17a4f7cb 100644 --- a/packages/icons-react/src/animated-icons/ArrowVerticalAnimated.tsx +++ b/packages/icons-react/src/animated-icons/ArrowVerticalAnimated.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { ArrowUp } from "../icons/ArrowUp"; import { ArrowDown } from "../icons/ArrowDown"; import { variants } from "../icons/types"; @@ -8,7 +8,7 @@ interface Props { variant?: variants; } -export const ArrowVerticalAnimated: React.FC = ({ pointingDown, variant = "small" }) => { +export const ArrowVerticalAnimated: FC = ({ pointingDown, variant = "small" }) => { const iconSize = variant !== "inherit" ? variant : "small"; return ( diff --git a/packages/icons-react/src/animated-icons/HamburgerCloseAnimated.tsx b/packages/icons-react/src/animated-icons/HamburgerCloseAnimated.tsx index eee2401ab5a..b3776c7d0ba 100644 --- a/packages/icons-react/src/animated-icons/HamburgerCloseAnimated.tsx +++ b/packages/icons-react/src/animated-icons/HamburgerCloseAnimated.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { Hamburger } from "../icons/Hamburger"; import { Close } from "../icons/Close"; import { variants } from "../icons/types"; @@ -12,13 +12,13 @@ interface ShowProps { when: boolean; } -const Show: React.FC = ({ when, children }) => ( +const Show: FC = ({ when, children }) => (
{children}
); -export const HamburgerCloseAnimated: React.FC = ({ isBurger, variant = "small" }) => { +export const HamburgerCloseAnimated: FC = ({ isBurger, variant = "small" }) => { const iconSize = variant !== "inherit" ? variant : "small"; return ( diff --git a/packages/icons-react/src/animated-icons/PlusRemoveAnimated.tsx b/packages/icons-react/src/animated-icons/PlusRemoveAnimated.tsx index 530fe19c839..b3be713f542 100644 --- a/packages/icons-react/src/animated-icons/PlusRemoveAnimated.tsx +++ b/packages/icons-react/src/animated-icons/PlusRemoveAnimated.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { Plus } from "../icons/Plus"; import { variants } from "../icons/types"; @@ -7,7 +7,7 @@ interface Props { variant?: variants; } -export const PlusRemoveAnimated: React.FC = ({ isPlus, variant = "small" }) => { +export const PlusRemoveAnimated: FC = ({ isPlus, variant = "small" }) => { const iconSize = variant !== "inherit" ? variant : "small"; return (
= ({ className, variant }) => ( +export const ArrowDown: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const ArrowLeft: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const ArrowRight: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const ArrowUp: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const ArrowUpRight: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Calendar: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const CheckMark: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Close: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Error: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Hamburger: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Info: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Plus: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Search: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Success: FC = ({ className, variant }) => ( = ({ className, variant }) => ( +export const Warning: FC = ({ className, variant }) => ( = ({ +export const Image: FC = ({ thumbnail, defaultSize, objectPosition = "initial", diff --git a/packages/list-react/src/List.tsx b/packages/list-react/src/List.tsx index 816a8c2c37f..f4160ff08f1 100644 --- a/packages/list-react/src/List.tsx +++ b/packages/list-react/src/List.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import classNames from "classnames"; interface Props { @@ -7,7 +7,7 @@ interface Props { type validLists = "unordered" | "ordered"; -function makeListComponent(listType: validLists): React.FC { +function makeListComponent(listType: validLists): FC { return ({ children, className = "jkl-body" }) => { const componentClassName = classNames("jkl-list", className, { "jkl-list--ordered": listType === "ordered", diff --git a/packages/list-react/src/ListItem.tsx b/packages/list-react/src/ListItem.tsx index 42081a1a4bb..c080829cf4a 100644 --- a/packages/list-react/src/ListItem.tsx +++ b/packages/list-react/src/ListItem.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import cn from "classnames"; interface Props { @@ -7,8 +7,8 @@ interface Props { type validListItems = "normal" | "check" | "cross"; -function makeListItem(listItemType: validListItems): React.FC { - const ListItem: React.FC = ({ className = "", children }) => { +function makeListItem(listItemType: validListItems): FC { + const ListItem: FC = ({ className = "", children }) => { return (
  • * { - padding-top: 32px; - } } } &-ipad { - position: relative; - height: 950px; - &__content { - position: absolute; - top: 39px; - bottom: 0; - left: 35px; - border-radius: 15px; height: 833px; width: 1112px; + border: 1px solid $svart; overflow: auto; } } diff --git a/packages/portal-components/src/ComponentExample.tsx b/packages/portal-components/src/ComponentExample.tsx index 8ae03fb6728..dde98d7cf0b 100644 --- a/packages/portal-components/src/ComponentExample.tsx +++ b/packages/portal-components/src/ComponentExample.tsx @@ -1,9 +1,9 @@ -import React from "react"; +import React, { FC } from "react"; import { ExampleComponentProps, ChoiceProp } from "../src"; import { ExampleBase } from "./ExampleBase"; export interface Props { - component: React.FC; + component: FC; title?: string; knobs?: { boolProps?: Array; @@ -11,7 +11,7 @@ export interface Props { }; } -export function ComponentExample({ component, knobs, title = "Komponent" }: Props) { +export const ComponentExample: FC = ({ component, knobs, title = "Komponent", children }) => { const C = component; return ( @@ -20,6 +20,8 @@ export function ComponentExample({ component, knobs, title = "Komponent" }: Prop title={title} responsiveLayout={false} component={({ boolValues, choiceValues }) => } - /> + > + {children} + ); -} +}; diff --git a/packages/portal-components/src/DevExample.tsx b/packages/portal-components/src/DevExample.tsx index c4a8005a1e1..c5c60496efc 100644 --- a/packages/portal-components/src/DevExample.tsx +++ b/packages/portal-components/src/DevExample.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import { ComponentExample, Props as ComponentExampleProps } from "./ComponentExample"; import { ResponsiveExample } from "./ResponsiveExample"; @@ -6,7 +6,7 @@ interface Props extends ComponentExampleProps { responsiveLayout?: boolean; } -export const DevExample: React.FC = ({ knobs, component, responsiveLayout = false }) => { +export const DevExample: FC = ({ knobs, component, responsiveLayout = false }) => { const C = responsiveLayout ? ResponsiveExample : ComponentExample; return ( diff --git a/packages/portal-components/src/ExampleBase.tsx b/packages/portal-components/src/ExampleBase.tsx index 98aea5ff1fa..28df35822ea 100644 --- a/packages/portal-components/src/ExampleBase.tsx +++ b/packages/portal-components/src/ExampleBase.tsx @@ -1,13 +1,14 @@ -import React, { useState, useLayoutEffect } from "react"; +import React, { useState, useLayoutEffect, FC } from "react"; import classNames from "classnames"; import { nanoid } from "nanoid"; import { Checkbox } from "@fremtind/jkl-checkbox-react"; import { RadioButtons } from "@fremtind/jkl-radio-button-react"; +import { Accordion, AccordionItem } from "@fremtind/jkl-accordion-react"; import { Dictionary, ChoiceProp, ExampleComponentProps } from "../src"; import { hyphenate } from "./internal/hypenate"; export interface Props { - component: React.FC; + component: FC; title?: string; knobs?: { boolProps?: Array; @@ -16,7 +17,7 @@ export interface Props { responsiveLayout: boolean; } -export const ExampleBase: React.FC = ({ responsiveLayout, component, knobs, title = "Komponent" }) => { +export const ExampleBase: FC = ({ responsiveLayout, component, knobs, title = "Komponent", children }) => { const [uid] = useState(`example-${nanoid(8)}`); const [boolValues, setBoolValues] = useState>({}); const [choices, setChoices] = useState>({}); @@ -44,14 +45,21 @@ export const ExampleBase: React.FC = ({ responsiveLayout, component, knob return (
    -
    - +
    +
    + +
    + {children && ( + + {children} + + )}
    {(knobs?.boolProps || knobs?.choiceProps) && (