@ntbjs/react-components 2.0.7 → 2.0.8-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/data/Alert/Alert.js +1 -1
- package/build/data/Alert/Alert.js.map +1 -1
- package/build/data/Alert/Alert.styled.js +1 -1
- package/build/data/Alert/Alert.styled.js.map +1 -1
- package/build/icons/index.js +3 -2
- package/build/icons/info-yellow.svg +11 -0
- package/build/inputs/Button/Button.js +18 -4
- package/build/inputs/Button/Button.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +5 -7
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +22 -2
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js +5 -8
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js +19 -3
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/asset.propType.js +3 -1
- package/build/widgets/AssetGallery/asset.propType.js.map +1 -1
- package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js +71 -0
- package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js.map +1 -0
- package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js +77 -0
- package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js.map +1 -0
- package/build/widgets/SummaryCard/SummaryCard.js +16 -23
- package/build/widgets/SummaryCard/SummaryCard.js.map +1 -1
- package/build/widgets/SummaryCard/SummaryCard.styled.js +3 -2
- package/build/widgets/SummaryCard/SummaryCard.styled.js.map +1 -1
- package/build/widgets/index.js +1 -0
- package/build/widgets/index.js.map +1 -1
- package/icons/index.js +3 -2
- package/icons/info-yellow.svg +11 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InstructionsSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InstructionsSeverityDisplay.styled';\n\nconst InformationIcon = () => (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst defaultLabels = {\n 1: 'Info',\n 2: 'Info',\n 3: 'Limited use',\n 4: 'Limited use',\n 5: 'Highly restricted'\n};\n\nconst InstructionsSeverityDisplay = React.forwardRef(function InstructionsSeverityDisplay(\n {\n severity,\n instructionText,\n severityLabel,\n labels,\n icon,\n showCard = true,\n padding,\n badgeFontSize,\n detailsFontSize,\n bgLight,\n bgDark,\n ...props\n },\n forwardedRef\n) {\n if (!instructionText) {\n return null;\n }\n\n const displayLabel =\n severityLabel || (labels && labels[severity]) || defaultLabels[severity] || defaultLabels[1];\n\n return (\n <S.Card\n ref={forwardedRef}\n $severity={severity}\n $showCard={showCard}\n $padding={padding}\n $bgLight={bgLight}\n $bgDark={bgDark}\n {...props}\n >\n <S.BadgePill $severity={severity}>\n {icon || <InformationIcon />}\n <S.BadgeText $fontSize={badgeFontSize}>{displayLabel}</S.BadgeText>\n </S.BadgePill>\n <S.InstructionText $fontSize={detailsFontSize}>{instructionText}</S.InstructionText>\n </S.Card>\n );\n});\n\nInstructionsSeverityDisplay.propTypes = {\n /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n severity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n /** The instruction text to display. Component returns null if empty. */\n instructionText: PropTypes.string,\n /** Override the default badge label for the severity level. */\n severityLabel: PropTypes.string,\n /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */\n labels: PropTypes.objectOf(PropTypes.string),\n /** Override the default icon element. */\n icon: PropTypes.element,\n /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n showCard: PropTypes.bool,\n /** Custom card padding, e.g. \"8px 6px\" or \"20px\". Defaults to \"14px 10px\". */\n padding: PropTypes.string,\n /** Custom font size for the badge text, e.g. \"10px\" or \"0.75rem\". Defaults to \"12px\". */\n badgeFontSize: PropTypes.string,\n /** Custom font size for the details/instruction text, e.g. \"12px\" or \"0.875rem\". Defaults to \"14px\". */\n detailsFontSize: PropTypes.string,\n /** Override card background color in light mode, e.g. \"#ffffff\" or \"transparent\". */\n bgLight: PropTypes.string,\n /** Override card background color in dark mode, e.g. \"#1a1a1a\" or \"transparent\". */\n bgDark: PropTypes.string\n};\n\nexport default InstructionsSeverityDisplay;\n"],"names":["InformationIcon","React","createElement","width","height","viewBox","fill","xmlns","d","defaultLabels","InstructionsSeverityDisplay","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","props","forwardedRef","displayLabel","S","_extends","ref","$severity","$showCard","$padding","$bgLight","$bgDark","$fontSize","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","objectOf","element","bool"],"mappings":"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"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { applyDefaultTheme } from '../../utils/defaultTheme.js';
|
|
3
|
+
|
|
4
|
+
const shouldForwardProp = prop => {
|
|
5
|
+
return prop !== 'theme' && !prop.startsWith('$');
|
|
6
|
+
};
|
|
7
|
+
const Card = styled.div.withConfig({
|
|
8
|
+
shouldForwardProp
|
|
9
|
+
}).attrs(applyDefaultTheme)`
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 8px;
|
|
13
|
+
padding: ${props => props.$padding || '14px 10px'};
|
|
14
|
+
${props => {
|
|
15
|
+
if (props.$bgDark || props.$bgLight) {
|
|
16
|
+
return props.theme.themeProp('background', props.$bgDark || props.theme.getColor('gray-900'), props.$bgLight || props.theme.getColor('gray-200'));
|
|
17
|
+
}
|
|
18
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
|
|
19
|
+
}}
|
|
20
|
+
|
|
21
|
+
${props => props.$showCard && css`
|
|
22
|
+
border-radius: 10px;
|
|
23
|
+
box-shadow: 0px 0px 26px #0000001a;
|
|
24
|
+
`}
|
|
25
|
+
|
|
26
|
+
${props => props.$severity === 5 && props.$showCard && css`
|
|
27
|
+
${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}
|
|
28
|
+
`}
|
|
29
|
+
`;
|
|
30
|
+
const BadgePill = styled.span.withConfig({
|
|
31
|
+
shouldForwardProp
|
|
32
|
+
}).attrs(applyDefaultTheme)`
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
align-items: center;
|
|
36
|
+
gap: 4px;
|
|
37
|
+
padding: 2px 8px;
|
|
38
|
+
border-radius: 9999px;
|
|
39
|
+
width: fit-content;
|
|
40
|
+
height: 24px;
|
|
41
|
+
${props => (props.$severity === 1 || props.$severity === 2) && css`
|
|
42
|
+
border-style: solid;
|
|
43
|
+
border-width: 1px;
|
|
44
|
+
${props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('white'))}
|
|
45
|
+
${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}
|
|
46
|
+
${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
|
|
47
|
+
`}
|
|
48
|
+
|
|
49
|
+
${props => (props.$severity === 3 || props.$severity === 4) && css`
|
|
50
|
+
${props.theme.themeProp('background', '#2e2301', '#faeeb3')}
|
|
51
|
+
${props.theme.themeProp('color', '#eab308', '#78350F')}
|
|
52
|
+
`}
|
|
53
|
+
|
|
54
|
+
${props => props.$severity === 5 && css`
|
|
55
|
+
${props.theme.themeProp('background', '#7E1B1B', 'rgba(182, 41, 2, 0.1)')}
|
|
56
|
+
${props.theme.themeProp('color', '#e8d5d6', '#b62902')}
|
|
57
|
+
`}
|
|
58
|
+
`;
|
|
59
|
+
const BadgeText = styled.span.withConfig({
|
|
60
|
+
shouldForwardProp
|
|
61
|
+
}).attrs(applyDefaultTheme)`
|
|
62
|
+
font-size: ${props => props.$fontSize || '12px'};
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
line-height: 1.333em;
|
|
65
|
+
`;
|
|
66
|
+
const InstructionText = styled.p.withConfig({
|
|
67
|
+
shouldForwardProp
|
|
68
|
+
}).attrs(applyDefaultTheme)`
|
|
69
|
+
font-size: ${props => props.$fontSize || '14px'};
|
|
70
|
+
font-weight: 400;
|
|
71
|
+
line-height: 1.286em;
|
|
72
|
+
margin: 0;
|
|
73
|
+
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
|
|
74
|
+
`;
|
|
75
|
+
|
|
76
|
+
export { BadgePill, BadgeText, Card, InstructionText };
|
|
77
|
+
//# sourceMappingURL=InstructionsSeverityDisplay.styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InstructionsSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Card = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: ${props => props.$padding || '14px 10px'};\n ${props => {\n if (props.$bgDark || props.$bgLight) {\n return props.theme.themeProp(\n 'background',\n props.$bgDark || props.theme.getColor('gray-900'),\n props.$bgLight || props.theme.getColor('gray-200')\n );\n }\n return props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('gray-200')\n );\n }}\n\n ${props =>\n props.$showCard &&\n css`\n border-radius: 10px;\n box-shadow: 0px 0px 26px #0000001a;\n `}\n\n ${props =>\n props.$severity === 5 &&\n props.$showCard &&\n css`\n ${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}\n `}\n`;\n\nexport const BadgePill = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 9999px;\n width: fit-content;\n height: 24px;\n ${props =>\n (props.$severity === 1 || props.$severity === 2) &&\n css`\n border-style: solid;\n border-width: 1px;\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-800'),\n props.theme.getColor('white')\n )}\n ${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}\n ${props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('black')\n )}\n `}\n\n ${props =>\n (props.$severity === 3 || props.$severity === 4) &&\n css`\n ${props.theme.themeProp('background', '#2e2301', '#faeeb3')}\n ${props.theme.themeProp('color', '#eab308', '#78350F')}\n `}\n\n ${props =>\n props.$severity === 5 &&\n css`\n ${props.theme.themeProp('background', '#7E1B1B', 'rgba(182, 41, 2, 0.1)')}\n ${props.theme.themeProp('color', '#e8d5d6', '#b62902')}\n `}\n`;\n\nexport const BadgeText = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: ${props => props.$fontSize || '12px'};\n font-weight: 500;\n line-height: 1.333em;\n`;\n\nexport const InstructionText = styled.p\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: ${props => props.$fontSize || '14px'};\n font-weight: 400;\n line-height: 1.286em;\n margin: 0;\n ${props =>\n props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","BadgePill","span","BadgeText","$fontSize","InstructionText","p"],"mappings":"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"}
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import React__default from 'react';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import '../../data/Badge/Badge.js';
|
|
7
|
-
import '../../data/Popover/Popover.js';
|
|
8
|
-
import '../../data/Tab/Tab.js';
|
|
9
|
-
import '../../data/Tabs/Tabs.js';
|
|
10
|
-
import '../../data/Tooltip/Tooltip.js';
|
|
11
|
-
import '../../data/VerificationStatusIcon/VerificationStatusIcon.js';
|
|
12
|
-
import { SummaryCard as SummaryCard$1, Gutter, Header, HeaderLeft, HeaderRight, Title, Description, Instruction, Footer, FooterLeft, FooterRight } from './SummaryCard.styled.js';
|
|
4
|
+
import InstructionsSeverityDisplay from '../InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
|
|
5
|
+
import { SummaryCard as SummaryCard$1, Gutter, Header, HeaderLeft, HeaderRight, Title, Description, Footer, FooterLeft, FooterRight } from './SummaryCard.styled.js';
|
|
13
6
|
|
|
14
7
|
const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
|
|
15
8
|
activeSummaryCard,
|
|
16
9
|
title,
|
|
17
10
|
description,
|
|
18
11
|
instructions,
|
|
19
|
-
|
|
12
|
+
instructionsSeverity,
|
|
20
13
|
headerLeft,
|
|
21
14
|
headerRight,
|
|
22
15
|
footerLeft,
|
|
@@ -24,6 +17,7 @@ const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
|
|
|
24
17
|
width,
|
|
25
18
|
useBorder,
|
|
26
19
|
view,
|
|
20
|
+
instructionLabels,
|
|
27
21
|
...props
|
|
28
22
|
}, forwardedRef) {
|
|
29
23
|
const shouldRenderInstructions = !!instructions;
|
|
@@ -47,16 +41,14 @@ const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
|
|
|
47
41
|
$gutter: 4
|
|
48
42
|
}), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
|
|
49
43
|
$gutter: 16
|
|
50
|
-
}), shouldRenderInstructions && React__default.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
lineClamp: 1
|
|
59
|
-
})), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
|
|
44
|
+
}), shouldRenderInstructions && React__default.createElement(InstructionsSeverityDisplay, {
|
|
45
|
+
labels: instructionLabels,
|
|
46
|
+
instructionText: instructions,
|
|
47
|
+
severity: instructionsSeverity,
|
|
48
|
+
showCard: false,
|
|
49
|
+
padding: `14px 17px`,
|
|
50
|
+
detailsFontSize: `12px`
|
|
51
|
+
}), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
|
|
60
52
|
$gutter: 16
|
|
61
53
|
}), shouldRenderFooter && React__default.createElement(Footer, null, React__default.createElement(FooterLeft, null, footerLeft), React__default.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default.createElement(Gutter, {
|
|
62
54
|
$gutter: 16
|
|
@@ -67,20 +59,21 @@ SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
67
59
|
title: PropTypes.string,
|
|
68
60
|
description: PropTypes.string,
|
|
69
61
|
instructions: PropTypes.string,
|
|
70
|
-
|
|
62
|
+
instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
|
|
71
63
|
headerLeft: PropTypes.node,
|
|
72
64
|
headerRight: PropTypes.node,
|
|
73
65
|
footerLeft: PropTypes.node,
|
|
74
66
|
footerRight: PropTypes.node,
|
|
75
67
|
width: PropTypes.number,
|
|
76
68
|
useBorder: PropTypes.bool,
|
|
77
|
-
view: PropTypes.string
|
|
69
|
+
view: PropTypes.string,
|
|
70
|
+
instructionLabels: PropTypes.objectOf(PropTypes.string)
|
|
78
71
|
} : {};
|
|
79
72
|
SummaryCard.defaultProps = {
|
|
80
73
|
title: '',
|
|
81
74
|
description: '',
|
|
82
75
|
instructions: '',
|
|
83
|
-
|
|
76
|
+
instructionsSeverity: 1,
|
|
84
77
|
headerLeft: null,
|
|
85
78
|
headerRight: null,
|
|
86
79
|
footerLeft: null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SummaryCard.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"SummaryCard.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InstructionsSeverityDisplay from '../InstructionsSeverityDisplay';\nimport * as S from './SummaryCard.styled';\n\n/**\n * ### Import\n *\n * ``` js\n * import { SummaryCard } from '@ntbjs/react-components/widgets'\n * // or\n * import SummaryCard from '@ntbjs/react-components/widgets/SummaryCard'\n * ```\n *\n * ### Props\n * ```\n * Pass `title=\"Title\"` to set the title of the card.\n * Pass `description=\"Description\"` to set the description of the card.\n * Pass `instructions=\"Instructions\"` to set the instructions of the card.\n * Pass 1-5 to `instructionsSeverity` to reflect the severity of the instructions.\n * Pass `headerLeft={<div>Left</div>}` to set the left header of the card.\n * Pass `headerRight={<div>Right</div>}` to set the right header of the card.\n * Pass `footerLeft={<div>Left</div>}` to set the left footer of the card.\n * Pass `footerRight={<div>Right</div>}` to set the right footer of the card.\n * Pass `width={300}` to set the width of the card.\n * Pass `useBorder={true}` to set the border of the card.\n * ```\n */\n\nconst SummaryCard = React.forwardRef(function AssetSummaryCard(\n {\n activeSummaryCard,\n title,\n description,\n instructions,\n instructionsSeverity,\n headerLeft,\n headerRight,\n footerLeft,\n footerRight,\n width,\n useBorder,\n view,\n instructionLabels,\n ...props\n },\n forwardedRef\n) {\n const shouldRenderInstructions = !!instructions;\n const shouldRenderHeader = !!headerLeft || !!headerRight;\n const shouldRenderFooter = !!footerLeft || !!footerRight;\n const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;\n const shouldAddGutterAfterTitle =\n !!title && (!!description || !!instructions || shouldRenderFooter);\n\n if (!activeSummaryCard) return null;\n\n const filteredProps = Object.fromEntries(\n Object.entries(props).filter(([key]) => key !== 'compact')\n );\n\n return (\n <S.SummaryCard\n ref={forwardedRef}\n width={width}\n $useBorder={useBorder}\n {...filteredProps}\n view={view}\n >\n {shouldRenderHeader && (\n <>\n <S.Gutter $gutter={8} />\n <S.Header>\n <S.HeaderLeft>{headerLeft}</S.HeaderLeft>\n <S.HeaderRight>{headerRight}</S.HeaderRight>\n </S.Header>\n </>\n )}\n <S.Gutter $gutter={shouldRenderHeader ? 8 : 16} />\n {title && <S.Title>{title}</S.Title>}\n {shouldAddGutterAfterTitle && <S.Gutter $gutter={4} />}\n {description && <S.Description>{description}</S.Description>}\n <S.Gutter $gutter={16} />\n\n {shouldRenderInstructions && (\n <InstructionsSeverityDisplay\n labels={instructionLabels}\n instructionText={instructions}\n severity={instructionsSeverity}\n showCard={false}\n padding={`14px 17px`}\n detailsFontSize={`12px`}\n />\n )}\n {shouldAddGutterAfterInstructions && <S.Gutter $gutter={16} />}\n {shouldRenderFooter && (\n <S.Footer>\n <S.FooterLeft>{footerLeft}</S.FooterLeft>\n <S.FooterRight>{footerRight}</S.FooterRight>\n </S.Footer>\n )}\n {shouldRenderFooter && <S.Gutter $gutter={16} />}\n </S.SummaryCard>\n );\n});\n\nSummaryCard.propTypes = {\n /**\n * Wether the SummaryCard is active or not.\n */\n activeSummaryCard: PropTypes.bool,\n /**\n * Title of the content\n */\n title: PropTypes.string,\n /**\n * Description of the content\n */\n description: PropTypes.string,\n /**\n * Special instructions for the content\n */\n instructions: PropTypes.string,\n /**\n * Type of instructions\n */\n instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n /**\n * One or more children to render in the left half of the header\n */\n headerLeft: PropTypes.node,\n /**\n * One or more children to render in the right half of the header\n */\n headerRight: PropTypes.node,\n /**\n * One or more children to render in the left half of the footer\n */\n footerLeft: PropTypes.node,\n /**\n * One or more children to render in the right half of the footer\n */\n footerRight: PropTypes.node,\n /**\n * Width of the card\n */\n width: PropTypes.number,\n /**\n * Whether or not to use a border around the card\n */\n useBorder: PropTypes.bool,\n /**\n * Whether or not the Summary Card is within the CompactCard view or Grid view\n */\n view: PropTypes.string,\n /**\n * Translated labels object for instruction(Info,Limited Use etc)\n */\n instructionLabels: PropTypes.objectOf(PropTypes.string)\n};\n\nSummaryCard.defaultProps = {\n title: '',\n description: '',\n instructions: '',\n instructionsSeverity: 1,\n headerLeft: null,\n headerRight: null,\n footerLeft: null,\n footerRight: null,\n useBorder: false,\n activeSummaryCard: false\n};\n\nexport default SummaryCard;\n"],"names":["SummaryCard","React","forwardRef","AssetSummaryCard","activeSummaryCard","title","description","instructions","instructionsSeverity","headerLeft","headerRight","footerLeft","footerRight","width","useBorder","view","instructionLabels","props","forwardedRef","shouldRenderInstructions","shouldRenderHeader","shouldRenderFooter","shouldAddGutterAfterInstructions","shouldAddGutterAfterTitle","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","$useBorder","Fragment","$gutter","InstructionsSeverityDisplay","labels","instructionText","severity","showCard","padding","detailsFontSize","propTypes","process","env","NODE_ENV","PropTypes","bool","string","oneOf","node","number","objectOf","defaultProps"],"mappings":"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"}
|
|
@@ -11,6 +11,7 @@ const SummaryCard = styled.div.withConfig({
|
|
|
11
11
|
display: flex;
|
|
12
12
|
flex-direction: column;
|
|
13
13
|
border-radius: 4px;
|
|
14
|
+
overflow:hidden;
|
|
14
15
|
width: ${props => props.width ? `${props.width}px` : '100%'};
|
|
15
16
|
${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
|
|
16
17
|
|
|
@@ -94,7 +95,7 @@ const Description = styled.span.withConfig({
|
|
|
94
95
|
|
|
95
96
|
${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
|
|
96
97
|
`;
|
|
97
|
-
|
|
98
|
+
styled.div.withConfig({
|
|
98
99
|
shouldForwardProp
|
|
99
100
|
}).attrs(applyDefaultTheme)``;
|
|
100
101
|
const Footer = styled.div.withConfig({
|
|
@@ -133,5 +134,5 @@ styled(FloatingArrow).withConfig({
|
|
|
133
134
|
${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
|
|
134
135
|
`;
|
|
135
136
|
|
|
136
|
-
export { Description, Footer, FooterLeft, FooterRight, Gutter, Header, HeaderLeft, HeaderRight,
|
|
137
|
+
export { Description, Footer, FooterLeft, FooterRight, Gutter, Header, HeaderLeft, HeaderRight, SummaryCard, Title };
|
|
137
138
|
//# sourceMappingURL=SummaryCard.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SummaryCard.styled.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { FloatingArrow } from '@floating-ui/react';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SummaryCard = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n width: ${props => (props.width ? `${props.width}px` : '100%')};\n ${props =>\n props.view === 'compact'\n ? props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('white')\n )\n : 'background: transparent'};\n\n ${props =>\n props.$useBorder\n ? props.theme.themeProp(\n 'border',\n `1px solid ${props.theme.getColor('gray-500')}`,\n `1px solid ${props.theme.getColor('gray-300')}`\n )\n : null}\n`;\n\nexport const Gutter = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${props => {\n if (props.renderAsMargin) {\n return css`\n margin-bottom: ${props.$gutter || 8}px;\n `;\n } else {\n return css`\n padding-bottom: ${props.$gutter || 8}px;\n `;\n }\n }}\n padding-bottom: ${props => props.$gutter || 8}px;\n`;\n\nexport const Header = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n`;\n\nexport const HeaderLeft = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n > * {\n margin-right: 4px;\n }\n`;\n\nexport const HeaderRight = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n > * {\n margin-left: 4px;\n }\n`;\n\nexport const Title = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n padding: 0 16px;\n font: normal normal 500 14px/19px Roboto;\n letter-spacing: 0.28px;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n`;\n\nexport const Description = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding: 0 16px;\n text-align: left;\n font: normal normal normal 12px/16px Roboto;\n letter-spacing: 0.24px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n`;\n\nexport const Instruction = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)``;\n\nexport const Footer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n`;\n\nexport const FooterLeft = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n > * {\n margin-right: 4px;\n }\n`;\n\nexport const FooterRight = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n > * {\n margin-left: 4px;\n }\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow)\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SummaryCard","styled","div","withConfig","attrs","applyDefaultTheme","props","width","view","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","css","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","
|
|
1
|
+
{"version":3,"file":"SummaryCard.styled.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { FloatingArrow } from '@floating-ui/react';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SummaryCard = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n border-radius: 4px;\n overflow:hidden;\n width: ${props => (props.width ? `${props.width}px` : '100%')};\n ${props =>\n props.view === 'compact'\n ? props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('white')\n )\n : 'background: transparent'};\n\n ${props =>\n props.$useBorder\n ? props.theme.themeProp(\n 'border',\n `1px solid ${props.theme.getColor('gray-500')}`,\n `1px solid ${props.theme.getColor('gray-300')}`\n )\n : null}\n`;\n\nexport const Gutter = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${props => {\n if (props.renderAsMargin) {\n return css`\n margin-bottom: ${props.$gutter || 8}px;\n `;\n } else {\n return css`\n padding-bottom: ${props.$gutter || 8}px;\n `;\n }\n }}\n padding-bottom: ${props => props.$gutter || 8}px;\n`;\n\nexport const Header = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n`;\n\nexport const HeaderLeft = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n > * {\n margin-right: 4px;\n }\n`;\n\nexport const HeaderRight = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n > * {\n margin-left: 4px;\n }\n`;\n\nexport const Title = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: inline-block;\n padding: 0 16px;\n font: normal normal 500 14px/19px Roboto;\n letter-spacing: 0.28px;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n`;\n\nexport const Description = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n padding: 0 16px;\n text-align: left;\n font: normal normal normal 12px/16px Roboto;\n letter-spacing: 0.24px;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n box-sizing: border-box;\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n`;\n\nexport const Instruction = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)``;\n\nexport const Footer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n`;\n\nexport const FooterLeft = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n > * {\n margin-right: 4px;\n }\n`;\n\nexport const FooterRight = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n > * {\n margin-left: 4px;\n }\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow)\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SummaryCard","styled","div","withConfig","attrs","applyDefaultTheme","props","width","view","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","css","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}
|
package/build/widgets/index.js
CHANGED
|
@@ -8,4 +8,5 @@ export { default as AssetActionBase } from './AssetActionsBase/AssetActionsBase.
|
|
|
8
8
|
export { default as AssetAction } from './AssetAction/AssetAction.js';
|
|
9
9
|
export { default as ProgressBar } from './ProgressBar/ProgressBar.js';
|
|
10
10
|
export { default as InfoCard } from './InfoCard/InfoCard.js';
|
|
11
|
+
export { default as InstructionsSeverityDisplay } from './InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
|
|
11
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/icons/index.js
CHANGED
|
@@ -36,7 +36,7 @@ import { ReactComponent as TriangleRightIcon } from './triangle-right.svg';
|
|
|
36
36
|
import { ReactComponent as VerificationIcon } from './verification.svg';
|
|
37
37
|
import { ReactComponent as WarningCircleIcon } from './warning-circle.svg';
|
|
38
38
|
import { ReactComponent as WarningTriangleIcon } from './warning-triangle.svg';
|
|
39
|
-
|
|
39
|
+
import { ReactComponent as InfoYellowIcon } from './info-yellow.svg';
|
|
40
40
|
export {
|
|
41
41
|
AddIcon,
|
|
42
42
|
AddCircleIcon,
|
|
@@ -75,5 +75,6 @@ export {
|
|
|
75
75
|
TriangleRightIcon,
|
|
76
76
|
VerificationIcon,
|
|
77
77
|
WarningCircleIcon,
|
|
78
|
-
WarningTriangleIcon
|
|
78
|
+
WarningTriangleIcon,
|
|
79
|
+
InfoYellowIcon
|
|
79
80
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<svg viewBox="5 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_yellow)">
|
|
3
|
+
<path d="M5 14C5 6.26801 11.268 0 19 0C26.732 0 33 6.26801 33 14C33 21.732 26.732 28 19 28C11.268 28 5 21.732 5 14Z" fill="#EAB308"/>
|
|
4
|
+
<path d="M19.001 2.91602C25.1222 2.91619 30.084 7.87878 30.084 14C30.0838 20.1211 25.1221 25.0828 19.001 25.083C12.8798 25.083 7.91717 20.1212 7.91699 14C7.91699 7.87867 12.8796 2.91602 19.001 2.91602ZM19.001 4.08301C16.3709 4.08301 13.848 5.12757 11.9883 6.9873C10.1285 8.84704 9.08398 11.3699 9.08398 14C9.08407 16.6299 10.1287 19.1521 11.9883 21.0117C13.848 22.8715 16.3709 23.916 19.001 23.916C21.6309 23.9159 24.153 22.8714 26.0127 21.0117C27.8724 19.1521 28.9169 16.6299 28.917 14C28.917 11.3699 27.8724 8.84704 26.0127 6.9873C24.1531 5.12775 21.6308 4.08309 19.001 4.08301ZM19.584 13.416V19.25H18.417V13.416H19.584ZM19.584 8.75V9.91602H18.417V8.75H19.584Z" fill="black" stroke="#451A03" stroke-width="1.16667"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_yellow">
|
|
8
|
+
<path d="M5 14C5 6.26801 11.268 0 19 0C26.732 0 33 6.26801 33 14C33 21.732 26.732 28 19 28C11.268 28 5 21.732 5 14Z" fill="white"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|