Compare commits

...
Author SHA1 Message Date
github-actions[bot] 746943014d Lerna versionbump [ci skip]
- @navikt/ds-react@0.3.3
 - nav-frontend-ekspanderbartpanel@3.1.3
 - nav-frontend-hjelpetekst@2.1.3
 - nav-frontend-ikonknapper@1.1.3
 - nav-frontend-js-utils@1.0.18
 - nav-frontend-knapper@2.1.3
 - nav-frontend-lesmerpanel@1.1.2
 - nav-frontend-lukknapp@1.2.1
 - nav-frontend-modal@1.2.1
 - nav-frontend-popover@1.1.3
 - nav-frontend-skjema@3.2.3
 - nav-frontend-stegindikator@1.1.2
 - nav-frontend-tabs@1.1.2
 - nav-frontend-tekstomrade@2.1.2
 - nav-frontend-toggle@1.1.3
 - nav-frontend-veileder@2.1.3
 - nav-frontend-veilederpanel@1.1.3
2021-05-10 08:32:44 +00:00
Terje KarlsenandKen 9fc9ca6666 Legger til typeguard for children i Tekstomrade-komponenten (#1089)
* legger til typeguard dersom children er falsy

* Tsconfig strict + fixes (#1087)

* fikset ts errors i nav-frontend

* oppdatert versjoner for modal og lukknapp

* sjekket endringer i storybook

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
2021-05-10 10:18:54 +02:00
github-actions[bot] f9766fd7ca Lerna versionbump [ci skip]
- @navikt/ds-css@0.3.2
2021-05-04 07:32:04 +00:00
Ken 15bb29a346 fikset sticky scroll (#1084) 2021-05-04 09:18:06 +02:00
33 changed files with 123 additions and 178 deletions

No files matched your search

+32 -35
View File
@@ -27,27 +27,6 @@
padding: var(--navds-layout-padding-small);
}
/* prettier-ignore */
.navds-layout__section--sticky {
/* TEMP Solution until dekratøren has updated */
--navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
top: calc(var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset));
position: sticky;
max-height: calc(100vh - var(--navds-grid-gutter-small) * 2 - var(--navds-sidebar-sticky-offset));
overflow-y: auto;
}
.navds-layout__container--3-columns
> .navds-layout__section--left.navds-layout__section--sticky {
position: sticky;
}
.navds-layout__container--2-columns
> .navds-layout__section--left.navds-layout__section--sticky {
position: sticky;
}
.navds-layout__section > *:not(:last-child) {
margin-bottom: var(--navds-layout-padding-small);
}
@@ -74,21 +53,23 @@
}
}
@media (max-width: 959px) {
.navds-layout__container--3-columns
> .navds-layout__section--left.navds-layout__section--sticky {
position: inherit;
}
}
@media (max-width: 647px) {
.navds-layout__container--2-columns
> .navds-layout__section--left.navds-layout__section--sticky {
position: inherit;
}
}
@media (min-width: 648px) {
/* prettier-ignore */
.navds-layout__container--2-columns > .navds-layout__section--left.navds-layout__section--sticky {
/* TEMP Solution until dekratøren has updated */
--navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
top: calc(
var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
);
position: sticky;
max-height: calc(
100vh - var(--navds-grid-gutter-small) * 2 -
var(--navds-sidebar-sticky-offset)
);
overflow-y: auto;
}
.navds-layout__container {
grid-gap: var(--navds-grid-gutter-medium-and-larger);
}
@@ -134,6 +115,22 @@
}
@media (min-width: 960px) {
/* prettier-ignore */
.navds-layout__container--3-columns > .navds-layout__section--left.navds-layout__section--sticky {
/* TEMP Solution until dekratøren has updated */
--navds-sidebar-sticky-offset: var(--decorator-sticky-offset);
top: calc(
var(--navds-grid-gutter-small) + var(--navds-sidebar-sticky-offset)
);
position: sticky;
max-height: calc(
100vh - var(--navds-grid-gutter-small) * 2 -
var(--navds-sidebar-sticky-offset)
);
overflow-y: auto;
}
.navds-layout__section--padding.navds-layout__section--left > * {
padding: var(--navds-layout-padding-small);
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-css",
"version": "0.3.1",
"version": "0.3.2",
"private": false,
"description": "Css for NAV Designsystem components",
"author": "NAV Designsystem team",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@navikt/ds-react",
"version": "0.3.2",
"version": "0.3.3",
"private": false,
"description": "NAV designsystem react components",
"author": "NAV Designsystem team",
@@ -13,7 +13,11 @@ export interface ActiveAnchorStore {
}
export const ActiveAnchorContext = createContext({} as ActiveAnchorStore);
export const ActiveAnchorProvider = ({ children }) => {
export const ActiveAnchorProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [anchors, setAnchors] = useState<string[]>([]);
const [activeAnchor, setActiveAnchor] = useState<string>();
@@ -21,7 +25,7 @@ export const ActiveAnchorProvider = ({ children }) => {
const scrollListener = () => {
const offset = 100;
const lastPassedAnchor = anchors
.map((anchor) => document.getElementById(anchor))
.map((anchor) => document.getElementById(anchor) as HTMLElement)
.map((element: HTMLElement) => ({
id: element.id,
top: element.getBoundingClientRect().top - offset,
@@ -3,7 +3,7 @@ import React from "react";
/**
* @ignore
*/
const MenuItems = ({ children }) => (
const MenuItems = ({ children }: { children: React.ReactNode }) => (
<ul className="navds-accordion-menu__list">
{React.Children.toArray(children).map((child, i) => (
<li key={i} className="navds-accordion-menu__list-item">
@@ -32,14 +32,16 @@ const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
({ children, text, label, icon, className, ...rest }, ref) => {
const buttonRef = useRef<HTMLButtonElement>(null);
const mergedRef = mergeRefs([buttonRef, ref]);
const timeoutRef = useRef<NodeJS.Timeout>();
const timeoutRef = useRef<number | null>();
const [openPopover, setOpenPopover] = useState(false);
useEffect(() => {
if (openPopover) {
timeoutRef.current = setTimeout(() => setOpenPopover(false), 2000);
return () => timeoutRef.current && clearTimeout(timeoutRef.current);
}
timeoutRef.current = openPopover
? window.setTimeout(() => setOpenPopover(false), 2000)
: null;
return () => {
timeoutRef.current && clearTimeout(timeoutRef.current);
};
}, [openPopover]);
const title = `Kopier ${label} (${text})`;
@@ -1,65 +0,0 @@
import * as React from "react";
import { forwardRef, HTMLAttributes, useEffect, useRef, useState } from "react";
import { Files } from "@navikt/ds-icons";
import "@navikt/ds-css/baseline/utility.css";
import "./style.css";
export interface CopyToClipboardProps
extends HTMLAttributes<HTMLButtonElement> {
/** Verdi som skal kopieres */
value: string;
/** Beskrivelse av verdien, feks "personnummer", "navn", "epost" etc. */
label: string;
}
const CopyToClipboard = forwardRef<HTMLButtonElement, CopyToClipboardProps>(
(props, ref) => {
const { value, label, className, ...rest } = props;
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const [showSuccess, setShowSuccess] = useState(false);
useEffect(() => {
const timeout = setTimeout(() => setShowSuccess(false), 3000);
return () => clearTimeout(timeout);
}, [showSuccess]);
const copyToClipboard = (event: React.MouseEvent) => {
event.stopPropagation();
textAreaRef.current?.select();
document.execCommand("copy");
setShowSuccess(true);
};
const title = `Kopier ${label} (${value})`;
return (
<span className={`${className} navds-copyToClipboard-wrapper`}>
<button
ref={ref}
title={title}
{...rest}
className="navds-copyToClipboard-button"
onClick={copyToClipboard}
>
<Files />
<span className="sr-only">{title}</span>
</button>
{showSuccess && (
<span role="alert" className="navds-copyToClipboard-success">
{label}
</span>
)}
<textarea
className="sr-only"
tabIndex={-1}
aria-hidden={true}
ref={textAreaRef}
value={value}
readOnly
/>
</span>
);
}
);
export default CopyToClipboard;
-1
View File
@@ -5,7 +5,6 @@ import Bash from "../code/Bash";
import Prettier from "prettier/standalone";
import ParserBabel from "prettier/parser-babel";
import "./preview.css";
import OverflowDetector from "../overflow-detector/OverflowDetector";
import cl from "classnames";
const prettierOptions = {
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-ekspanderbartpanel",
"version": "3.1.2",
"version": "3.1.3",
"main": "lib/index.js",
"license": "MIT",
"types": "lib/index.d.ts",
@@ -30,7 +30,7 @@
"@types/react-collapse": "^5.0.0",
"classnames": "^2.2.5",
"nav-frontend-ekspanderbartpanel-style": "^1.1.2",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"react": "^16.8.0 || ^17.0.0",
"react-collapse": "^5.0.0"
},
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-hjelpetekst",
"version": "2.1.2",
"version": "2.1.3",
"main": "lib/hjelpetekst.js",
"types": "lib/hjelpetekst.d.ts",
"license": "MIT",
@@ -31,8 +31,8 @@
"classnames": "^2.2.5",
"nav-frontend-hjelpetekst-style": "^2.1.1",
"nav-frontend-ikoner-assets": "^2.0.10",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-popover": "^1.1.2",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-popover": "^1.1.3",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
},
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-ikonknapper",
"version": "1.1.2",
"version": "1.1.3",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -25,7 +25,7 @@
"devDependencies": {
"nav-frontend-chevron": "^1.0.28",
"nav-frontend-ikoner-assets": "^2.0.10",
"nav-frontend-knapper": "^2.1.2",
"nav-frontend-knapper": "^2.1.3",
"react": "^16.8.0 || ^17.0.0"
}
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-js-utils",
"version": "1.0.17",
"version": "1.0.18",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -10,7 +10,7 @@ export interface EventThrottlerProps {
}
export class EventThrottler extends React.Component<EventThrottlerProps> {
private throttled: () => void;
private throttled!: () => void;
componentDidMount() {
this.throttled = _throttle(this.props.callback, this.props.delay, {
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-knapper",
"version": "2.1.2",
"version": "2.1.3",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -27,7 +27,7 @@
"@types/classnames": "^2.2.3",
"@types/react": "15.0.23 || ^16.0.0",
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-knapper-style": "^1.1.2",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-lesmerpanel",
"version": "1.1.1",
"version": "1.1.2",
"main": "lib/lesmerpanel.js",
"types": "lib/lesmerpanel.d.ts",
"license": "MIT",
@@ -29,7 +29,7 @@
"@types/react-collapse": "^5.0.0",
"classnames": "^2.2.5",
"nav-frontend-chevron": "^1.0.28",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-lesmerpanel-style": "^1.1.1",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-lukknapp",
"version": "1.1.1",
"version": "1.2.1",
"main": "lib/lukknapp.js",
"types": "lib/lukknapp.d.ts",
"license": "MIT",
@@ -17,6 +17,10 @@ const cls = (bla, hvit, hjorne, className) =>
export interface LukknappProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
/**
* Tekst som beskriver knappen for skjermleser
*/
children: string;
/**
* Blå variant
*/
@@ -51,7 +55,7 @@ class Lukknapp extends React.Component<LukknappProps, {}> {
overstHjorne: false,
};
buttonRef: HTMLButtonElement;
buttonRef!: HTMLButtonElement;
constructor(props) {
super(props);
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-modal",
"version": "1.1.2",
"version": "1.2.1",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -19,7 +19,7 @@
"peerDependencies": {
"@types/react-modal": "^3.1.2",
"classnames": "^2.2.5",
"nav-frontend-lukknapp": "^1.0.48",
"nav-frontend-lukknapp": "^1.2.0",
"nav-frontend-modal-style": "^1.0.0",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0",
@@ -28,7 +28,7 @@
"devDependencies": {
"@types/react-modal": "^3.1.2",
"classnames": "^2.2.5",
"nav-frontend-lukknapp": "^1.1.1",
"nav-frontend-lukknapp": "^1.2.1",
"nav-frontend-modal-style": "^1.1.1",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0",
+2 -2
View File
@@ -58,9 +58,9 @@ export interface ModalProps extends Props {
}
class ModalWrapper extends React.Component<ModalProps, {}> {
closeButtonRef: Lukknapp | null;
closeButtonRef: Lukknapp | null | undefined;
modalRef: Modal | null;
modalRef!: Modal | null;
static setAppElement(element) {
Modal.setAppElement(element);
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import Modal from "../src/index";
import { Meta } from "@storybook/react/types-6-0";
@@ -7,34 +7,30 @@ export default {
component: Modal,
} as Meta;
const Template = ({
closeButton,
isOpen,
shouldCloseOnOverlayClick,
...args
}) => (
<Modal
isOpen={isOpen}
onRequestClose={() => null}
closeButton={closeButton}
contentLabel="Min modalrute"
>
<div>
Innhold som vises i modal
<p>
Eu veniam nulla dolore culpa sint esse consectetur commodo non esse id.
Aliquip nostrud incididunt quis minim aute eiusmod non fugiat nisi.
Proident irure officia laboris ex in cupidatat minim cillum
reprehenderit velit velit aliquip duis. Velit amet consequat aliquip
reprehenderit consequat sunt occaecat ea aliqua incididunt fugiat enim
dolore.
</p>
</div>
</Modal>
);
export const All = () => {
const [open, setOpen] = useState(true);
export const All = Template.bind({});
All.args = {
closeButton: true,
isOpen: true,
return (
<>
<button onClick={() => setOpen(!open)}>modalstate</button>
<Modal
isOpen={open}
onRequestClose={() => setOpen(false)}
closeButton={true}
contentLabel="Min modalrute"
>
<div>
Innhold som vises i modal
<p>
Eu veniam nulla dolore culpa sint esse consectetur commodo non esse
id. Aliquip nostrud incididunt quis minim aute eiusmod non fugiat
nisi. Proident irure officia laboris ex in cupidatat minim cillum
reprehenderit velit velit aliquip duis. Velit amet consequat aliquip
reprehenderit consequat sunt occaecat ea aliqua incididunt fugiat
enim dolore.
</p>
</div>
</Modal>
</>
);
};
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-popover",
"version": "1.1.2",
"version": "1.1.3",
"main": "lib/popover.js",
"types": "lib/popover.d.ts",
"license": "MIT",
@@ -28,7 +28,7 @@
"@types/classnames": "^2.2.3",
"@types/react": "15.0.23 || ^16.0.0",
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-popover-style": "^1.1.1",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0",
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-skjema",
"version": "3.2.2",
"version": "3.2.3",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -29,7 +29,7 @@
"devDependencies": {
"@navikt/fnrvalidator": "^1.1.0",
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-lenker": "^1.1.1",
"nav-frontend-skjema-style": "^2.2.2",
"nav-frontend-typografi": "^3.1.1",
@@ -159,6 +159,7 @@ class Textarea extends React.Component<TextareaProps> {
}
componentDidMount() {
// @ts-ignore
requestAnimationFrame.call(window, this.updateHeight, 0);
}
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-stegindikator",
"version": "1.1.1",
"version": "1.1.2",
"main": "lib/stegindikator.js",
"types": "lib/stegindikator.d.js",
"license": "MIT",
@@ -19,7 +19,7 @@
"react": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-stegindikator-style": "^1.1.1",
"react": "^16.8.0 || ^17.0.0"
},
@@ -65,7 +65,7 @@ class Stegindikator extends React.Component<
autoResponsiv: false,
};
private list: HTMLOListElement;
private list!: HTMLOListElement;
constructor(props: StegindikatorProps) {
super(props);
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-tabs",
"version": "1.1.1",
"version": "1.1.2",
"main": "lib/tabs.js",
"types": "lib/tabs.d.ts",
"license": "MIT",
@@ -20,7 +20,7 @@
},
"devDependencies": {
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-tabs-style": "^1.1.1",
"react": "^16.8.0 || ^17.0.0"
},
+1 -1
View File
@@ -24,7 +24,7 @@ export interface TabsState {
class Tabs extends React.Component<TabsProps, TabsState> {
static Tab = Tab;
private pure: TabsPure;
private pure!: TabsPure;
static defaultProps: Partial<TabsProps> = {
kompakt: false,
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-tekstomrade",
"version": "2.1.1",
"version": "2.1.2",
"main": "lib/tekstomrade.js",
"types": "lib/tekstomrade.d.ts",
"license": "MIT",
@@ -42,6 +42,11 @@ class Tekstomrade extends React.Component<TekstomradeProps> {
render() {
const { as, children, ingenFormattering, rules, ...rest } = this.props;
if (typeof children !== "string") {
return null;
}
if (ingenFormattering) {
return <div {...rest}>{children}</div>;
}
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-toggle",
"version": "1.1.2",
"version": "1.1.3",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"license": "MIT",
@@ -21,7 +21,7 @@
},
"devDependencies": {
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-toggle-style": "^1.1.2",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-veileder",
"version": "2.1.2",
"version": "2.1.3",
"main": "lib/veileder.js",
"types": "lib/veileder.d.ts",
"license": "MIT",
@@ -21,7 +21,7 @@
},
"devDependencies": {
"classnames": "^2.2.5",
"nav-frontend-js-utils": "^1.0.17",
"nav-frontend-js-utils": "^1.0.18",
"nav-frontend-veileder-style": "^2.1.1",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
@@ -1,6 +1,6 @@
{
"name": "nav-frontend-veilederpanel",
"version": "1.1.2",
"version": "1.1.3",
"main": "lib/veilederpanel.js",
"types": "lib/veilederpanel.d.ts",
"license": "MIT",
@@ -21,7 +21,7 @@
},
"devDependencies": {
"classnames": "^2.2.5",
"nav-frontend-veileder": "^2.1.2",
"nav-frontend-veileder": "^2.1.3",
"nav-frontend-veilederpanel-style": "^1.1.1",
"prop-types": "^15.5.10",
"react": "^16.8.0 || ^17.0.0"
+2
View File
@@ -12,6 +12,8 @@
"noImplicitAny": false,
"declaration": true,
"skipLibCheck": true,
"strict": true,
"strictFunctionTypes": false,
"moduleResolution": "node",
"lib": ["DOM", "es2015", "es2016", "es2017"]
},