@bbl-digital/snorre 4.0.21 → 4.0.23
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/bundle.js +117 -31
- package/esm/core/BoxedTable/TableBody/index.js +10 -0
- package/esm/core/BoxedTable/TableBody/styles.js +16 -0
- package/esm/core/Button/Button.stories.js +51 -49
- package/esm/core/Card/index.js +4 -3
- package/esm/core/Checkbox/index.js +32 -9
- package/esm/core/CollapseList/Item.js +4 -3
- package/esm/core/CollapseList/index.js +4 -3
- package/esm/core/Datepicker/Datepicker.stories.js +7 -6
- package/esm/core/DatepickerRange/DatepickerRange.stories.js +4 -3
- package/esm/core/Dropdown/index.js +0 -1
- package/esm/core/DropdownMenu/DropdownMenu.stories.js +34 -26
- package/esm/core/DropdownMenu/DropdownMenuOption.js +2 -0
- package/esm/core/DropdownMenu/index.js +16 -0
- package/esm/core/Editor/Editor.stories.js +31 -30
- package/esm/core/FileInput/index.js +7 -1
- package/esm/core/GoogleButton/GoogleButton.stories.js +4 -4
- package/esm/core/Header/Header.stories.js +42 -45
- package/esm/core/HighlightText/HighlightText.stories.js +11 -11
- package/esm/core/Image/index.js +19 -4
- package/esm/core/ImagePicker/ImagePicker.stories.js +2 -1
- package/esm/core/ImagePicker/index.js +4 -0
- package/esm/core/ImageViewer/index.js +15 -5
- package/esm/core/InfoButton/InfoButton.stories.js +23 -22
- package/esm/core/InfoButton/index.js +4 -0
- package/esm/core/Input/index.js +4 -0
- package/esm/core/private/ButtonOrLink.js +4 -3
- package/lib/core/Autocomplete/styles.d.ts +39 -1
- package/lib/core/Autocomplete/styles.d.ts.map +1 -1
- package/lib/core/Box/styles.d.ts +39 -1
- package/lib/core/Box/styles.d.ts.map +1 -1
- package/lib/core/BoxedTable/TableBody/index.d.ts +7 -0
- package/lib/core/BoxedTable/TableBody/index.d.ts.map +1 -0
- package/lib/core/BoxedTable/TableBody/index.js +10 -0
- package/lib/core/BoxedTable/TableBody/styles.d.ts +6 -0
- package/lib/core/BoxedTable/TableBody/styles.d.ts.map +1 -0
- package/lib/core/BoxedTable/TableBody/styles.js +16 -0
- package/lib/core/Button/Button.stories.d.ts +20 -63
- package/lib/core/Button/Button.stories.d.ts.map +1 -1
- package/lib/core/Button/Button.stories.js +51 -49
- package/lib/core/Button/index.d.ts +54 -3
- package/lib/core/Button/index.d.ts.map +1 -1
- package/lib/core/Card/index.d.ts +14 -15
- package/lib/core/Card/index.d.ts.map +1 -1
- package/lib/core/Card/index.js +4 -3
- package/lib/core/Checkbox/index.d.ts +3 -3
- package/lib/core/Checkbox/index.d.ts.map +1 -1
- package/lib/core/Checkbox/index.js +32 -9
- package/lib/core/CollapseList/Item.d.ts +1 -1
- package/lib/core/CollapseList/Item.d.ts.map +1 -1
- package/lib/core/CollapseList/Item.js +4 -3
- package/lib/core/CollapseList/index.d.ts +1 -1
- package/lib/core/CollapseList/index.d.ts.map +1 -1
- package/lib/core/CollapseList/index.js +4 -3
- package/lib/core/CollapseList/styles.d.ts +39 -1
- package/lib/core/CollapseList/styles.d.ts.map +1 -1
- package/lib/core/Datepicker/Datepicker.stories.d.ts +6 -6
- package/lib/core/Datepicker/Datepicker.stories.d.ts.map +1 -1
- package/lib/core/Datepicker/Datepicker.stories.js +7 -6
- package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts +6 -7
- package/lib/core/DatepickerRange/DatepickerRange.stories.d.ts.map +1 -1
- package/lib/core/DatepickerRange/DatepickerRange.stories.js +4 -3
- package/lib/core/Dropdown/index.d.ts.map +1 -1
- package/lib/core/Dropdown/index.js +0 -1
- package/lib/core/DropdownMenu/DropdownMenu.stories.d.ts +8 -15
- package/lib/core/DropdownMenu/DropdownMenu.stories.d.ts.map +1 -1
- package/lib/core/DropdownMenu/DropdownMenu.stories.js +34 -26
- package/lib/core/DropdownMenu/DropdownMenuOption.d.ts.map +1 -1
- package/lib/core/DropdownMenu/DropdownMenuOption.js +2 -0
- package/lib/core/DropdownMenu/index.d.ts.map +1 -1
- package/lib/core/DropdownMenu/index.js +16 -0
- package/lib/core/Editor/Editor.stories.d.ts +10 -23
- package/lib/core/Editor/Editor.stories.d.ts.map +1 -1
- package/lib/core/Editor/Editor.stories.js +31 -30
- package/lib/core/FileInput/index.d.ts +3 -1
- package/lib/core/FileInput/index.d.ts.map +1 -1
- package/lib/core/FileInput/index.js +7 -1
- package/lib/core/FileInput/styles.d.ts +39 -1
- package/lib/core/FileInput/styles.d.ts.map +1 -1
- package/lib/core/GoogleButton/GoogleButton.stories.d.ts +6 -7
- package/lib/core/GoogleButton/GoogleButton.stories.d.ts.map +1 -1
- package/lib/core/GoogleButton/GoogleButton.stories.js +4 -4
- package/lib/core/Header/Header.stories.d.ts +13 -35
- package/lib/core/Header/Header.stories.d.ts.map +1 -1
- package/lib/core/Header/Header.stories.js +42 -45
- package/lib/core/HighlightText/HighlightText.stories.d.ts +7 -11
- package/lib/core/HighlightText/HighlightText.stories.d.ts.map +1 -1
- package/lib/core/HighlightText/HighlightText.stories.js +11 -11
- package/lib/core/Image/index.d.ts +1 -0
- package/lib/core/Image/index.d.ts.map +1 -1
- package/lib/core/Image/index.js +19 -4
- package/lib/core/ImagePicker/ImagePicker.stories.d.ts +6 -17
- package/lib/core/ImagePicker/ImagePicker.stories.d.ts.map +1 -1
- package/lib/core/ImagePicker/ImagePicker.stories.js +2 -1
- package/lib/core/ImagePicker/index.d.ts.map +1 -1
- package/lib/core/ImagePicker/index.js +4 -0
- package/lib/core/ImageViewer/index.d.ts.map +1 -1
- package/lib/core/ImageViewer/index.js +15 -5
- package/lib/core/InfoButton/InfoButton.stories.d.ts +10 -23
- package/lib/core/InfoButton/InfoButton.stories.d.ts.map +1 -1
- package/lib/core/InfoButton/InfoButton.stories.js +23 -22
- package/lib/core/InfoButton/index.d.ts.map +1 -1
- package/lib/core/InfoButton/index.js +4 -0
- package/lib/core/InfoButton/styles.d.ts +39 -1
- package/lib/core/InfoButton/styles.d.ts.map +1 -1
- package/lib/core/Input/index.d.ts +1 -1
- package/lib/core/Input/index.d.ts.map +1 -1
- package/lib/core/Input/index.js +4 -0
- package/lib/core/private/ButtonOrLink.d.ts +46 -3
- package/lib/core/private/ButtonOrLink.d.ts.map +1 -1
- package/lib/core/private/ButtonOrLink.js +4 -3
- package/lib/layout/Footer/FooterButton/styles.d.ts +3 -3
- package/lib/layout/Footer/FooterLink/styles.d.ts +3 -3
- package/lib/layout/Menu/MenuTop/styles.d.ts +3 -3
- package/package.json +1 -1
- package/esm/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
- package/esm/core/CheckboxController/index.js +0 -22
- package/esm/core/Datepicker/yearMonthForm.js +0 -56
- package/esm/core/EditorOld/config.js +0 -69
- package/esm/core/EditorOld/index.js +0 -147
- package/esm/core/EditorOld/styles.js +0 -65
- package/esm/core/ImageCarousel/index.js +0 -70
- package/esm/core/ImageCarousel/styles.js +0 -58
- package/esm/enums/ModifierKey.js +0 -13
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts +0 -7
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.d.ts.map +0 -1
- package/lib/core/Autocomplete/utils/useHandleOptionsHeight.js +0 -16
- package/lib/core/CheckboxController/index.d.ts +0 -1
- package/lib/core/CheckboxController/index.d.ts.map +0 -1
- package/lib/core/CheckboxController/index.js +0 -22
- package/lib/core/Datepicker/yearMonthForm.d.ts +0 -10
- package/lib/core/Datepicker/yearMonthForm.d.ts.map +0 -1
- package/lib/core/Datepicker/yearMonthForm.js +0 -56
- package/lib/core/EditorOld/config.d.ts +0 -56
- package/lib/core/EditorOld/config.d.ts.map +0 -1
- package/lib/core/EditorOld/config.js +0 -69
- package/lib/core/EditorOld/index.d.ts +0 -39
- package/lib/core/EditorOld/index.d.ts.map +0 -1
- package/lib/core/EditorOld/index.js +0 -147
- package/lib/core/EditorOld/styles.d.ts +0 -23
- package/lib/core/EditorOld/styles.d.ts.map +0 -1
- package/lib/core/EditorOld/styles.js +0 -65
- package/lib/core/ImageCarousel/index.d.ts +0 -11
- package/lib/core/ImageCarousel/index.d.ts.map +0 -1
- package/lib/core/ImageCarousel/index.js +0 -70
- package/lib/core/ImageCarousel/styles.d.ts +0 -26
- package/lib/core/ImageCarousel/styles.d.ts.map +0 -1
- package/lib/core/ImageCarousel/styles.js +0 -58
- package/lib/enums/ModifierKey.d.ts +0 -12
- package/lib/enums/ModifierKey.d.ts.map +0 -1
- package/lib/enums/ModifierKey.js +0 -13
@@ -1,65 +1,62 @@
|
|
1
1
|
import Header from '.';
|
2
|
-
|
3
|
-
export default {
|
2
|
+
const meta = {
|
4
3
|
title: 'Core/Header',
|
5
4
|
component: Header
|
6
5
|
};
|
6
|
+
export default meta;
|
7
7
|
export const Header1 = {
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
}
|
12
|
-
name: 'Header 1'
|
8
|
+
args: {
|
9
|
+
children: 'Header',
|
10
|
+
level: 1
|
11
|
+
},
|
12
|
+
name: 'Header level 1'
|
13
13
|
};
|
14
14
|
export const Header2 = {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
19
|
-
name: 'Header 2'
|
15
|
+
args: {
|
16
|
+
children: 'Header 2',
|
17
|
+
level: 2
|
18
|
+
},
|
19
|
+
name: 'Header level 2'
|
20
20
|
};
|
21
21
|
export const Header3 = {
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
}
|
26
|
-
name: 'Header 3'
|
22
|
+
args: {
|
23
|
+
children: 'Header 3',
|
24
|
+
level: 3
|
25
|
+
},
|
26
|
+
name: 'Header level 3'
|
27
27
|
};
|
28
28
|
export const Header4 = {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
}
|
33
|
-
name: 'Header 4'
|
29
|
+
args: {
|
30
|
+
children: 'Header 4',
|
31
|
+
level: 4
|
32
|
+
},
|
33
|
+
name: 'Header level 4'
|
34
34
|
};
|
35
35
|
export const Header5 = {
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
}
|
40
|
-
name: 'Header 5'
|
36
|
+
args: {
|
37
|
+
children: 'Header 5',
|
38
|
+
level: 5
|
39
|
+
},
|
40
|
+
name: 'Header level 5'
|
41
41
|
};
|
42
|
-
export const
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
}),
|
42
|
+
export const HeaderSecondaryColor = {
|
43
|
+
args: {
|
44
|
+
children: 'Header 3 custom color',
|
45
|
+
secondary: true
|
46
|
+
},
|
48
47
|
name: 'Header custom color'
|
49
48
|
};
|
50
49
|
export const HeaderPrimaryColor = {
|
51
|
-
|
52
|
-
|
53
|
-
primary: true
|
54
|
-
|
55
|
-
}),
|
50
|
+
args: {
|
51
|
+
children: 'Header 3 primary color',
|
52
|
+
primary: true
|
53
|
+
},
|
56
54
|
name: 'Header primary color'
|
57
55
|
};
|
58
|
-
export const
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
name: 'Header secondary color'
|
56
|
+
export const HeaderCustomColor = {
|
57
|
+
args: {
|
58
|
+
children: 'Header 3 custom color',
|
59
|
+
color: 'red'
|
60
|
+
},
|
61
|
+
name: 'Header custom color'
|
65
62
|
};
|
@@ -1,12 +1,8 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
export
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
export declare const AllProps: {
|
9
|
-
render: () => import("react").JSX.Element;
|
10
|
-
name: string;
|
11
|
-
};
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import HighlightText from '.';
|
3
|
+
declare const meta: Meta<typeof HighlightText>;
|
4
|
+
export default meta;
|
5
|
+
declare type Story = StoryObj<typeof HighlightText>;
|
6
|
+
export declare const Highlight: Story;
|
7
|
+
export declare const AllProps: Story;
|
12
8
|
//# sourceMappingURL=HighlightText.stories.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HighlightText.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/HighlightText/HighlightText.stories.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"HighlightText.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/HighlightText/HighlightText.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,aAAa,MAAM,GAAG,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AAE3C,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA"}
|
@@ -1,22 +1,22 @@
|
|
1
1
|
import HighlightText from '.';
|
2
|
-
|
3
|
-
export default {
|
2
|
+
const meta = {
|
4
3
|
title: 'Core/HighlightText',
|
5
4
|
component: HighlightText
|
6
5
|
};
|
6
|
+
export default meta;
|
7
7
|
export const Highlight = {
|
8
|
-
|
9
|
-
text:
|
10
|
-
highlight:
|
11
|
-
}
|
8
|
+
args: {
|
9
|
+
text: 'This is a text with a highlighted part',
|
10
|
+
highlight: 'highlighted part'
|
11
|
+
},
|
12
12
|
name: 'Highlight'
|
13
13
|
};
|
14
14
|
export const AllProps = {
|
15
|
-
|
16
|
-
text:
|
17
|
-
highlight:
|
18
|
-
size:
|
15
|
+
args: {
|
16
|
+
text: 'This is a text with a highlighted part',
|
17
|
+
highlight: 'highlighted part',
|
18
|
+
size: '14px',
|
19
19
|
semibold: true
|
20
|
-
}
|
20
|
+
},
|
21
21
|
name: 'All props'
|
22
22
|
};
|
@@ -22,6 +22,7 @@ interface IProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
22
22
|
/** Set object-fit css property */
|
23
23
|
objectFit?: 'fill' | 'contain' | 'cover' | 'non' | 'scale-down' | 'initial' | 'inherit';
|
24
24
|
/** CSS override */
|
25
|
+
interactive?: boolean;
|
25
26
|
css?: SerializedStyles;
|
26
27
|
}
|
27
28
|
declare const Image: React.FC<IProps>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Image/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,MAAO,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChE,GAAG,EAAE,MAAM,CAAA;IACX,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,SAAS,CAAC,EACN,MAAM,GACN,SAAS,GACT,OAAO,GACP,KAAK,GACL,YAAY,GACZ,SAAS,GACT,SAAS,CAAA;IACb,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,GAAG,CAAC,EAAE,gBAAgB,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAsD3B,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/lib/core/Image/index.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
2
2
|
|
3
|
-
import React, { useState } from 'react';
|
3
|
+
import React, { useMemo, useState } from 'react';
|
4
4
|
import { convertBlobToObjectUrl } from '../../utils/image';
|
5
5
|
import styles from './styles';
|
6
6
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
@@ -16,16 +16,31 @@ const Image = ({
|
|
16
16
|
radius,
|
17
17
|
withPlaceholder,
|
18
18
|
fallbackUrl,
|
19
|
+
interactive,
|
19
20
|
...restProps
|
20
21
|
}) => {
|
21
22
|
const [imageLoaded, setImageLoaded] = useState(false);
|
22
23
|
const [imageSrc, setImageSrc] = useState(src || blob && convertBlobToObjectUrl(blob) || undefined);
|
24
|
+
const altText = useMemo(() => {
|
25
|
+
if (!imageLoaded && withPlaceholder) return 'Laster bilde...';
|
26
|
+
if (!imageSrc) return 'Bilde ikke tilgjengelig';
|
27
|
+
return alt;
|
28
|
+
}, [imageLoaded, imageSrc, alt]);
|
29
|
+
const handleLoad = () => {
|
30
|
+
setImageLoaded(true);
|
31
|
+
};
|
32
|
+
const handleError = () => {
|
33
|
+
setImageSrc(fallbackUrl);
|
34
|
+
setImageLoaded(false);
|
35
|
+
};
|
23
36
|
return _jsx("img", {
|
24
37
|
src: imageSrc,
|
25
|
-
alt:
|
26
|
-
onLoad: withPlaceholder ? () =>
|
27
|
-
onError: fallbackUrl ? () =>
|
38
|
+
alt: altText,
|
39
|
+
onLoad: withPlaceholder ? () => handleLoad() : undefined,
|
40
|
+
onError: fallbackUrl ? () => handleError() : undefined,
|
28
41
|
css: theme => [height && styles.height(height), width && styles.width(width), responsive && styles.responsive, objectFit && styles.objectFit(objectFit), withPlaceholder && !imageLoaded && styles.placeholder(theme), radius && styles.radius(radius), css && css],
|
42
|
+
tabIndex: interactive ? 0 : undefined,
|
43
|
+
role: interactive ? 'button' : undefined,
|
29
44
|
...restProps
|
30
45
|
});
|
31
46
|
};
|
@@ -1,18 +1,7 @@
|
|
1
|
-
|
2
|
-
import
|
3
|
-
declare const
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
imageUrl: string;
|
8
|
-
} & ImageType)[] | undefined;
|
9
|
-
multiple?: boolean | undefined;
|
10
|
-
onChange: (value: import("react-images-uploading").ImageListType) => void;
|
11
|
-
}) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;
|
12
|
-
};
|
13
|
-
export default _default;
|
14
|
-
export declare const Default: {
|
15
|
-
render: () => import("react").JSX.Element;
|
16
|
-
name: string;
|
17
|
-
};
|
1
|
+
import ImagePicker from '.';
|
2
|
+
import { Meta, StoryObj } from '@storybook/react';
|
3
|
+
declare const meta: Meta<typeof ImagePicker>;
|
4
|
+
export default meta;
|
5
|
+
declare type Story = StoryObj<typeof ImagePicker>;
|
6
|
+
export declare const Default: Story;
|
18
7
|
//# sourceMappingURL=ImagePicker.stories.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ImagePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/ImagePicker.stories.tsx"],"names":[],"mappings":";
|
1
|
+
{"version":3,"file":"ImagePicker.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/ImagePicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,GAAG,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAMjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA"}
|
@@ -4,10 +4,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
4
|
const state = createState({
|
5
5
|
images: []
|
6
6
|
});
|
7
|
-
|
7
|
+
const meta = {
|
8
8
|
title: 'Core/ImagePicker',
|
9
9
|
component: ImagePicker
|
10
10
|
};
|
11
|
+
export default meta;
|
11
12
|
export const Default = {
|
12
13
|
render: () => /*#__PURE__*/_jsx("div", {
|
13
14
|
style: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAuB,EACrB,aAAa,EACb,SAAS,EACT,uBAAuB,EACxB,MAAM,wBAAwB,CAAA;AAU/B,aAAK,KAAK,GAAG,uBAAuB,GAAG;IACrC,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;IAC/C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,QAAA,MAAM,WAAW,iFAOd,KAAK,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImagePicker/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAuB,EACrB,aAAa,EACb,SAAS,EACT,uBAAuB,EACxB,MAAM,wBAAwB,CAAA;AAU/B,aAAK,KAAK,GAAG,uBAAuB,GAAG;IACrC,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAA;IAC/C,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,QAAA,MAAM,WAAW,iFAOd,KAAK,qDAuIP,CAAA;AAED,eAAe,WAAW,CAAA"}
|
@@ -78,6 +78,7 @@ const ImagePicker = ({
|
|
78
78
|
focusable: true,
|
79
79
|
css: styles.deleteButton,
|
80
80
|
onClick: () => onImageRemove(0),
|
81
|
+
"aria-label": "Fjern bilde",
|
81
82
|
children: _jsx(IconWithBackground, {
|
82
83
|
variant: "delete",
|
83
84
|
icon: _jsx(IconDelete, {})
|
@@ -95,6 +96,7 @@ const ImagePicker = ({
|
|
95
96
|
nostyle: true,
|
96
97
|
focusable: true,
|
97
98
|
css: styles.pinButton,
|
99
|
+
"aria-label": "Sett som hovedbilde",
|
98
100
|
onClick: () => setMainImage(index + 1),
|
99
101
|
children: _jsx(IconWithBackground, {
|
100
102
|
icon: _jsx(IconImage, {}),
|
@@ -104,6 +106,7 @@ const ImagePicker = ({
|
|
104
106
|
nostyle: true,
|
105
107
|
focusable: true,
|
106
108
|
css: styles.deleteButton,
|
109
|
+
"aria-label": "Fjern bilde",
|
107
110
|
onClick: () => onImageRemove(index + 1),
|
108
111
|
children: _jsx(IconWithBackground, {
|
109
112
|
variant: "delete",
|
@@ -117,6 +120,7 @@ const ImagePicker = ({
|
|
117
120
|
...dragProps
|
118
121
|
})]
|
119
122
|
}), errors?.acceptType && _jsx(Text, {
|
123
|
+
role: "alert",
|
120
124
|
children: "Bilde formatet st\xF8ttes ikke"
|
121
125
|
})]
|
122
126
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImageViewer/index.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/ImageViewer/index.tsx"],"names":[],"mappings":"AAYA,aAAK,KAAK,GAAG;IACX,kBAAkB;IAClB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,WAAW,sCAA2C,KAAK,qDAiGhE,CAAA;AACD,eAAe,WAAW,CAAA"}
|
@@ -8,6 +8,7 @@ import IconChevronLeft from '../../icons/General/IconChevronLeft';
|
|
8
8
|
import IconClose from '../../icons/General/IconClose';
|
9
9
|
import { useEffect, useState } from 'react';
|
10
10
|
import { Key } from '../../enums/Keyboard';
|
11
|
+
import { VisuallyHidden } from 'react-aria';
|
11
12
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
12
13
|
import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
13
14
|
const ImageViewer = ({
|
@@ -30,10 +31,15 @@ const ImageViewer = ({
|
|
30
31
|
const hasMultipleImages = Boolean(images.length > 1);
|
31
32
|
return _jsx("div", {
|
32
33
|
css: styles.overlay,
|
33
|
-
children:
|
34
|
+
children: _jsxs("div", {
|
34
35
|
css: styles.carousel,
|
35
36
|
role: "dialog",
|
36
|
-
|
37
|
+
"aria-modal": true,
|
38
|
+
"aria-labelledby": "carousel-heading",
|
39
|
+
children: [_jsx(VisuallyHidden, {
|
40
|
+
id: "carousel-heading",
|
41
|
+
children: "Bildevisning"
|
42
|
+
}), _jsx(Carousel, {
|
37
43
|
enableKeyboardControls: true,
|
38
44
|
swiping: hasMultipleImages,
|
39
45
|
dragging: hasMultipleImages,
|
@@ -44,6 +50,7 @@ const ImageViewer = ({
|
|
44
50
|
renderTopRightControls: () => _jsx("button", {
|
45
51
|
css: styles.closeBtn,
|
46
52
|
onClick: onClose,
|
53
|
+
"aria-label": "Lukk bildevisning",
|
47
54
|
children: _jsx(IconClose, {
|
48
55
|
color: "white"
|
49
56
|
})
|
@@ -53,6 +60,7 @@ const ImageViewer = ({
|
|
53
60
|
}) => hasMultipleImages && _jsx("button", {
|
54
61
|
css: styles.controlBtn('right'),
|
55
62
|
onClick: nextSlide,
|
63
|
+
"aria-label": "Naviger til neste bilde",
|
56
64
|
children: _jsx(IconChevronLeft, {
|
57
65
|
size: 18,
|
58
66
|
color: theme.btnDefaultFontColor,
|
@@ -64,6 +72,7 @@ const ImageViewer = ({
|
|
64
72
|
}) => hasMultipleImages && _jsx("button", {
|
65
73
|
css: styles.controlBtn('left'),
|
66
74
|
onClick: previousSlide,
|
75
|
+
"aria-label": "Naviger til forrige bilde",
|
67
76
|
children: _jsx(IconChevronLeft, {
|
68
77
|
size: 18,
|
69
78
|
color: theme.btnDefaultFontColor
|
@@ -76,19 +85,20 @@ const ImageViewer = ({
|
|
76
85
|
children: _jsxs(Text, {
|
77
86
|
color: theme.btnDefaultFontColor,
|
78
87
|
size: "14px",
|
88
|
+
"aria-label": `Bilde ${currentSlide + 1} av ${images.length}`,
|
79
89
|
children: [currentSlide + 1, " / ", images.length]
|
80
90
|
})
|
81
91
|
}),
|
82
92
|
children: images.map((imageSrc, i) => _jsx("div", {
|
83
|
-
css: [styles.imageContainer(isZoomed), process.env.NODE_ENV === "production" ? "" : ";label:ImageViewer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
93
|
+
css: [styles.imageContainer(isZoomed), process.env.NODE_ENV === "production" ? "" : ";label:ImageViewer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5R3lCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9wYWNrYWdlcy9jb3JlL0ltYWdlVmlld2VyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4SW1wb3J0U291cmNlIEBlbW90aW9uL3JlYWN0ICovXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi9zdHlsZXMnXG5pbXBvcnQgSW1hZ2UgZnJvbSAnLi4vSW1hZ2UnXG5pbXBvcnQgQ2Fyb3VzZWwgZnJvbSAnbnVrYS1jYXJvdXNlbCdcbmltcG9ydCBUZXh0IGZyb20gJy4uL1RleHQnXG5pbXBvcnQgSWNvbkNoZXZyb25MZWZ0IGZyb20gJy4uLy4uL2ljb25zL0dlbmVyYWwvSWNvbkNoZXZyb25MZWZ0J1xuaW1wb3J0IEljb25DbG9zZSBmcm9tICcuLi8uLi9pY29ucy9HZW5lcmFsL0ljb25DbG9zZSdcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEtleSB9IGZyb20gJy4uLy4uL2VudW1zL0tleWJvYXJkJ1xuaW1wb3J0IHsgVmlzdWFsbHlIaWRkZW4gfSBmcm9tICdyZWFjdC1hcmlhJ1xuXG50eXBlIFByb3BzID0ge1xuICAvKiogSW1hZ2Ugc3JjJ3MgKi9cbiAgaW1hZ2VzOiBzdHJpbmdbXVxuICAvKiogSW1hZ2UgbGlzdCBpbmRleCB0byBkaXNwbGF5IGluaXRpYWxseSwgZGVmYXVsdHMgdG8gMCAqL1xuICBpbml0aWFsSW1hZ2U6IG51bWJlclxuICAvKiogT24gY2xvc2UgY2FsbGJhY2sgKi9cbiAgb25DbG9zZTogKCkgPT4gdm9pZFxufVxuXG5jb25zdCBJbWFnZVZpZXdlciA9ICh7IGltYWdlcywgaW5pdGlhbEltYWdlID0gMCwgb25DbG9zZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKClcbiAgY29uc3QgW2lzWm9vbWVkLCBzZXRJc1pvb21lZF0gPSB1c2VTdGF0ZShmYWxzZSlcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIFRyaWdnZXIgY2xvc2UgZXZlbnQgb24gXCJlc2NhcGVcIiBrZXlkb3duXG4gICAgY29uc3QgaGFuZGxlS2V5RG93biA9IChldmVudDogS2V5Ym9hcmRFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gS2V5LmVzY2FwZSkgb25DbG9zZSgpXG4gICAgfVxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBoYW5kbGVLZXlEb3duKVxuICAgIH1cbiAgfSwgW10pXG5cbiAgY29uc3QgaGFzTXVsdGlwbGVJbWFnZXMgPSBCb29sZWFuKGltYWdlcy5sZW5ndGggPiAxKVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjc3M9e3N0eWxlcy5vdmVybGF5fT5cbiAgICAgIDxkaXZcbiAgICAgICAgY3NzPXtzdHlsZXMuY2Fyb3VzZWx9XG4gICAgICAgIHJvbGU9XCJkaWFsb2dcIlxuICAgICAgICBhcmlhLW1vZGFsPXt0cnVlfVxuICAgICAgICBhcmlhLWxhYmVsbGVkYnk9XCJjYXJvdXNlbC1oZWFkaW5nXCJcbiAgICAgID5cbiAgICAgICAgPFZpc3VhbGx5SGlkZGVuIGlkPVwiY2Fyb3VzZWwtaGVhZGluZ1wiPkJpbGRldmlzbmluZzwvVmlzdWFsbHlIaWRkZW4+XG4gICAgICAgIDxDYXJvdXNlbFxuICAgICAgICAgIGVuYWJsZUtleWJvYXJkQ29udHJvbHNcbiAgICAgICAgICBzd2lwaW5nPXtoYXNNdWx0aXBsZUltYWdlc31cbiAgICAgICAgICBkcmFnZ2luZz17aGFzTXVsdGlwbGVJbWFnZXN9XG4gICAgICAgICAgd3JhcEFyb3VuZFxuICAgICAgICAgIHNsaWRlSW5kZXg9e2luaXRpYWxJbWFnZX1cbiAgICAgICAgICBjZWxsU3BhY2luZz17MTV9XG4gICAgICAgICAgb25Vc2VyTmF2aWdhdGlvbj17KCkgPT4gc2V0SXNab29tZWQoZmFsc2UpfVxuICAgICAgICAgIHJlbmRlclRvcFJpZ2h0Q29udHJvbHM9eygpID0+IChcbiAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgY3NzPXtzdHlsZXMuY2xvc2VCdG59XG4gICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ2xvc2V9XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJMdWtrIGJpbGRldmlzbmluZ1wiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxJY29uQ2xvc2UgY29sb3I9XCJ3aGl0ZVwiIC8+XG4gICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICApfVxuICAgICAgICAgIHJlbmRlckNlbnRlclJpZ2h0Q29udHJvbHM9eyh7IG5leHRTbGlkZSB9KSA9PlxuICAgICAgICAgICAgaGFzTXVsdGlwbGVJbWFnZXMgJiYgKFxuICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgY3NzPXtzdHlsZXMuY29udHJvbEJ0bigncmlnaHQnKX1cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtuZXh0U2xpZGV9XG4gICAgICAgICAgICAgICAgYXJpYS1sYWJlbD1cIk5hdmlnZXIgdGlsIG5lc3RlIGJpbGRlXCJcbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHsvKiBVc2VzIEljb25DaGV2cm9uTGVmdCwgYmVjYXVzZSBJY29uQ2hldnJvblJpZ2h0IGlzIG5vdCBjZW50ZXJlZCBwcm9wZXJseSAgKi99XG4gICAgICAgICAgICAgICAgPEljb25DaGV2cm9uTGVmdFxuICAgICAgICAgICAgICAgICAgc2l6ZT17MTh9XG4gICAgICAgICAgICAgICAgICBjb2xvcj17dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn1cbiAgICAgICAgICAgICAgICAgIGZsaXBcbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIClcbiAgICAgICAgICB9XG4gICAgICAgICAgcmVuZGVyQ2VudGVyTGVmdENvbnRyb2xzPXsoeyBwcmV2aW91c1NsaWRlIH0pID0+XG4gICAgICAgICAgICBoYXNNdWx0aXBsZUltYWdlcyAmJiAoXG4gICAgICAgICAgICAgIDxidXR0b25cbiAgICAgICAgICAgICAgICBjc3M9e3N0eWxlcy5jb250cm9sQnRuKCdsZWZ0Jyl9XG4gICAgICAgICAgICAgICAgb25DbGljaz17cHJldmlvdXNTbGlkZX1cbiAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPVwiTmF2aWdlciB0aWwgZm9ycmlnZSBiaWxkZVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8SWNvbkNoZXZyb25MZWZ0IHNpemU9ezE4fSBjb2xvcj17dGhlbWUuYnRuRGVmYXVsdEZvbnRDb2xvcn0gLz5cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICApXG4gICAgICAgICAgfVxuICAgICAgICAgIHJlbmRlckJvdHRvbUNlbnRlckNvbnRyb2xzPXsoeyBjdXJyZW50U2xpZGUgfSkgPT4gKFxuICAgICAgICAgICAgPGRpdiBjc3M9e3N0eWxlcy5wYWdlSW5mb30+XG4gICAgICAgICAgICAgIDxUZXh0XG4gICAgICAgICAgICAgICAgY29sb3I9e3RoZW1lLmJ0bkRlZmF1bHRGb250Q29sb3J9XG4gICAgICAgICAgICAgICAgc2l6ZT1cIjE0cHhcIlxuICAgICAgICAgICAgICAgIGFyaWEtbGFiZWw9e2BCaWxkZSAke2N1cnJlbnRTbGlkZSArIDF9IGF2ICR7aW1hZ2VzLmxlbmd0aH1gfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge2N1cnJlbnRTbGlkZSArIDF9IC8ge2ltYWdlcy5sZW5ndGh9XG4gICAgICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICl9XG4gICAgICAgID5cbiAgICAgICAgICB7aW1hZ2VzLm1hcCgoaW1hZ2VTcmMsIGkpID0+IChcbiAgICAgICAgICAgIDxkaXYga2V5PXtpfSBjc3M9e1tzdHlsZXMuaW1hZ2VDb250YWluZXIoaXNab29tZWQpXX0+XG4gICAgICAgICAgICAgIDxJbWFnZVxuICAgICAgICAgICAgICAgIHNyYz17aW1hZ2VTcmN9XG4gICAgICAgICAgICAgICAgYWx0PXtgQmlsZGUgJHtpICsgMX0gYXYgJHtpbWFnZXMubGVuZ3RofWB9XG4gICAgICAgICAgICAgICAgb2JqZWN0Rml0PVwiY29udGFpblwiXG4gICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4gc2V0SXNab29tZWQoIWlzWm9vbWVkKX1cbiAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICkpfVxuICAgICAgICA8L0Nhcm91c2VsPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIClcbn1cbmV4cG9ydCBkZWZhdWx0IEltYWdlVmlld2VyXG4iXX0= */"],
|
84
94
|
children: _jsx(Image, {
|
85
95
|
src: imageSrc,
|
86
|
-
alt:
|
96
|
+
alt: `Bilde ${i + 1} av ${images.length}`,
|
87
97
|
objectFit: "contain",
|
88
98
|
onClick: () => setIsZoomed(!isZoomed)
|
89
99
|
})
|
90
100
|
}, i))
|
91
|
-
})
|
101
|
+
})]
|
92
102
|
})
|
93
103
|
});
|
94
104
|
};
|
@@ -1,24 +1,11 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
export
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
export declare const
|
9
|
-
|
10
|
-
|
11
|
-
};
|
12
|
-
export declare const Bottom: {
|
13
|
-
render: () => import("react").JSX.Element;
|
14
|
-
name: string;
|
15
|
-
};
|
16
|
-
export declare const Left: {
|
17
|
-
render: () => import("react").JSX.Element;
|
18
|
-
name: string;
|
19
|
-
};
|
20
|
-
export declare const Width: {
|
21
|
-
render: () => import("react").JSX.Element;
|
22
|
-
name: string;
|
23
|
-
};
|
1
|
+
import { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import InfoButton from '.';
|
3
|
+
declare const meta: Meta<typeof InfoButton>;
|
4
|
+
export default meta;
|
5
|
+
declare type Story = StoryObj<typeof InfoButton>;
|
6
|
+
export declare const Default: Story;
|
7
|
+
export declare const Right: Story;
|
8
|
+
export declare const Bottom: Story;
|
9
|
+
export declare const Left: Story;
|
10
|
+
export declare const Width: Story;
|
24
11
|
//# sourceMappingURL=InfoButton.stories.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"InfoButton.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/InfoButton.stories.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"InfoButton.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/InfoButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,UAAU,MAAM,GAAG,CAAA;AAG1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,aAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAA"}
|
@@ -1,57 +1,58 @@
|
|
1
1
|
import InfoButton from '.';
|
2
2
|
import IconHelp from '../../icons/General/IconHelp';
|
3
3
|
import { jsx as _jsx } from "react/jsx-runtime";
|
4
|
-
|
4
|
+
const meta = {
|
5
5
|
title: 'Core/InfoButton',
|
6
6
|
component: InfoButton
|
7
7
|
};
|
8
|
+
export default meta;
|
8
9
|
export const Default = {
|
9
|
-
|
10
|
+
args: {
|
11
|
+
children: 'This will be the content',
|
10
12
|
icon: /*#__PURE__*/_jsx(IconHelp, {
|
11
13
|
primary: true
|
12
|
-
})
|
13
|
-
|
14
|
-
}),
|
14
|
+
})
|
15
|
+
},
|
15
16
|
name: 'Default'
|
16
17
|
};
|
17
18
|
export const Right = {
|
18
|
-
|
19
|
+
args: {
|
20
|
+
children: 'This will be the content. This very long and unnecessary text shows how the tooltip will handle responsiveness',
|
19
21
|
icon: /*#__PURE__*/_jsx(IconHelp, {
|
20
22
|
primary: true
|
21
23
|
}),
|
22
|
-
place:
|
23
|
-
|
24
|
-
}),
|
24
|
+
place: 'right'
|
25
|
+
},
|
25
26
|
name: 'Right'
|
26
27
|
};
|
27
28
|
export const Bottom = {
|
28
|
-
|
29
|
+
args: {
|
30
|
+
children: 'This will be the content',
|
29
31
|
icon: /*#__PURE__*/_jsx(IconHelp, {
|
30
32
|
primary: true
|
31
33
|
}),
|
32
|
-
place:
|
33
|
-
|
34
|
-
}),
|
34
|
+
place: 'bottom'
|
35
|
+
},
|
35
36
|
name: 'Bottom'
|
36
37
|
};
|
37
38
|
export const Left = {
|
38
|
-
|
39
|
+
args: {
|
40
|
+
children: 'This will be the content',
|
39
41
|
icon: /*#__PURE__*/_jsx(IconHelp, {
|
40
42
|
primary: true
|
41
43
|
}),
|
42
|
-
place:
|
43
|
-
|
44
|
-
}),
|
44
|
+
place: 'left'
|
45
|
+
},
|
45
46
|
name: 'Left'
|
46
47
|
};
|
47
48
|
export const Width = {
|
48
|
-
|
49
|
+
args: {
|
50
|
+
children: 'Custom width',
|
49
51
|
icon: /*#__PURE__*/_jsx(IconHelp, {
|
50
52
|
primary: true
|
51
53
|
}),
|
52
|
-
place:
|
53
|
-
width:
|
54
|
-
|
55
|
-
}),
|
54
|
+
place: 'right',
|
55
|
+
width: '100px'
|
56
|
+
},
|
56
57
|
name: 'Width'
|
57
58
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,UAAU,MAAM;IACd,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC3C,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAyC,MAAM,OAAO,CAAA;AAK7D,UAAU,MAAM;IACd,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC3C,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwEhC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
@@ -40,6 +40,7 @@ const InfoButton = ({
|
|
40
40
|
}, [showTooltip, ref]);
|
41
41
|
return _jsxs(Wrapper, {
|
42
42
|
ref: ref,
|
43
|
+
className: className,
|
43
44
|
children: [_jsx(StyledButton, {
|
44
45
|
"aria-label": ariaLabel,
|
45
46
|
trackingName: trackingName,
|
@@ -52,6 +53,9 @@ const InfoButton = ({
|
|
52
53
|
timeout: 80,
|
53
54
|
classNames: "tooltip",
|
54
55
|
children: _jsx(Tooltip, {
|
56
|
+
role: "tooltip",
|
57
|
+
id: "info-tooltip",
|
58
|
+
"aria-hidden": !showTooltip,
|
55
59
|
css: () => [styles.default, place === 'top' && styles.top, place === 'right' && styles.right, place === 'bottom' && styles.bottom, place === 'left' && styles.left, width && styles.width(width, place)],
|
56
60
|
children: _jsx(Text, {
|
57
61
|
children: children ? children : ''
|
@@ -1,5 +1,43 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
-
export declare const StyledButton: import("@emotion/styled").StyledComponent<
|
2
|
+
export declare const StyledButton: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<import("../private/ButtonOrLink").ButtonOrLinkTypes> & {
|
3
|
+
afterIcon?: import("react").ReactNode;
|
4
|
+
beforeIcon?: import("react").ReactNode;
|
5
|
+
children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal;
|
6
|
+
disabled?: boolean | undefined;
|
7
|
+
href?: string | undefined;
|
8
|
+
loading?: boolean | undefined;
|
9
|
+
onClick?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
|
10
|
+
onMouseUp?: ((event: import("react").MouseEvent<import("../private/ButtonOrLink").ButtonOrLinkTypes, MouseEvent>) => void) | undefined;
|
11
|
+
onCustomKeyPress?: {
|
12
|
+
key: string;
|
13
|
+
action: (event: KeyboardEvent) => void;
|
14
|
+
} | undefined;
|
15
|
+
onKeyPress?: ((event: KeyboardEvent) => void) | undefined;
|
16
|
+
onEnterKeyPress?: ((event: KeyboardEvent) => void) | undefined;
|
17
|
+
onEscapeKeyPress?: ((event: KeyboardEvent) => void) | undefined;
|
18
|
+
openInNewWindow?: boolean | undefined;
|
19
|
+
rel?: string | undefined;
|
20
|
+
trackingEvent?: string | undefined;
|
21
|
+
trackingName?: string | undefined;
|
22
|
+
type?: "button" | "submit" | "reset" | undefined;
|
23
|
+
target?: string | undefined;
|
24
|
+
download?: any;
|
25
|
+
tabIndex?: number | undefined;
|
26
|
+
} & {
|
27
|
+
success?: boolean | undefined;
|
28
|
+
danger?: boolean | undefined;
|
29
|
+
highlight?: boolean | undefined;
|
30
|
+
outline?: boolean | undefined;
|
31
|
+
nostyle?: boolean | undefined;
|
32
|
+
focusable?: boolean | undefined;
|
33
|
+
border?: string | undefined;
|
34
|
+
css?: import("@emotion/utils").SerializedStyles | undefined;
|
35
|
+
loading?: boolean | undefined;
|
36
|
+
back?: boolean | undefined;
|
37
|
+
small?: boolean | undefined;
|
38
|
+
transparentBg?: boolean | undefined;
|
39
|
+
tabIndex?: number | undefined;
|
40
|
+
} & import("react").RefAttributes<HTMLButtonElement> & {
|
3
41
|
theme?: import("@emotion/react").Theme | undefined;
|
4
42
|
}, {}, {}>;
|
5
43
|
export declare const styles: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/core/InfoButton/styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAOxB,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;mBAmFF,MAAM,SAAS,MAAM;CAQrC,CAAA;AAED,eAAO,MAAM,OAAO;;;yGAiCnB,CAAA;AAED,eAAO,MAAM,OAAO;;;2GAInB,CAAA"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
2
2
|
import React from 'react';
|
3
|
-
export interface InputProps {
|
3
|
+
export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
|
4
4
|
/** Input type */
|
5
5
|
type?: 'text' | 'search' | 'number' | 'password' | 'file';
|
6
6
|
/** Input label */
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Input/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxE,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,gBAAgB;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,CAAA;IACtC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,oBAAY,GAAG,GAAG,gBAAgB,CAAA;AAElC,QAAA,MAAM,KAAK,qFAiIV,CAAA;AAED,eAAe,KAAK,CAAA"}
|