@ntbjs/react-components 2.0.10-rc.1 → 2.0.10-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/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js +18 -10
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js.map +1 -1
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js +31 -3
- package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import SeverityBadge from '../../data/SeverityBadge/SeverityBadge.js';
|
|
5
|
-
import { Card,
|
|
5
|
+
import { InstructionText, Card, ThumbnailWrapper, ThumbnailImage, ContentWrapper } from './InstructionSeverityDisplay.styled.js';
|
|
6
6
|
|
|
7
7
|
const defaultLabels = {
|
|
8
8
|
1: 'Info',
|
|
@@ -24,20 +24,15 @@ const InstructionSeverityDisplay = React__default.forwardRef(function Instructio
|
|
|
24
24
|
bgLight,
|
|
25
25
|
bgDark,
|
|
26
26
|
maxLines,
|
|
27
|
+
thumbnail,
|
|
27
28
|
...props
|
|
28
29
|
}, forwardedRef) {
|
|
29
30
|
if (!instructionText) {
|
|
30
31
|
return null;
|
|
31
32
|
}
|
|
32
33
|
const displayLabel = severityLabel || labels && labels[severity] || defaultLabels[severity] || defaultLabels[1];
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
$severity: severity,
|
|
36
|
-
$showCard: showCard,
|
|
37
|
-
$padding: padding,
|
|
38
|
-
$bgLight: bgLight,
|
|
39
|
-
$bgDark: bgDark
|
|
40
|
-
}, props), React__default.createElement(SeverityBadge, {
|
|
34
|
+
const hasThumbnail = thumbnail !== undefined;
|
|
35
|
+
const content = React__default.createElement(React__default.Fragment, null, React__default.createElement(SeverityBadge, {
|
|
41
36
|
severity: severity,
|
|
42
37
|
label: displayLabel,
|
|
43
38
|
icon: icon,
|
|
@@ -48,6 +43,18 @@ const InstructionSeverityDisplay = React__default.forwardRef(function Instructio
|
|
|
48
43
|
}, maxLines ? React__default.createElement("span", {
|
|
49
44
|
title: instructionText
|
|
50
45
|
}, instructionText) : instructionText));
|
|
46
|
+
return React__default.createElement(Card, _extends({
|
|
47
|
+
ref: forwardedRef,
|
|
48
|
+
$severity: severity,
|
|
49
|
+
$showCard: showCard,
|
|
50
|
+
$padding: padding,
|
|
51
|
+
$bgLight: bgLight,
|
|
52
|
+
$bgDark: bgDark,
|
|
53
|
+
$hasThumbnail: hasThumbnail
|
|
54
|
+
}, props), hasThumbnail && React__default.createElement(ThumbnailWrapper, null, thumbnail && React__default.createElement(ThumbnailImage, {
|
|
55
|
+
src: thumbnail,
|
|
56
|
+
alt: ""
|
|
57
|
+
})), hasThumbnail ? React__default.createElement(ContentWrapper, null, content) : content);
|
|
51
58
|
});
|
|
52
59
|
InstructionSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
53
60
|
severity: PropTypes.oneOf([1, 2, 3, 4, 5]),
|
|
@@ -61,7 +68,8 @@ InstructionSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
61
68
|
detailsFontSize: PropTypes.string,
|
|
62
69
|
bgLight: PropTypes.string,
|
|
63
70
|
bgDark: PropTypes.string,
|
|
64
|
-
maxLines: PropTypes.number
|
|
71
|
+
maxLines: PropTypes.number,
|
|
72
|
+
thumbnail: PropTypes.string
|
|
65
73
|
} : {};
|
|
66
74
|
|
|
67
75
|
export { InstructionSeverityDisplay as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstructionSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SeverityBadge from '../../data/SeverityBadge/SeverityBadge';\nimport * as S from './InstructionSeverityDisplay.styled';\n\nconst defaultLabels = {\n 1: 'Info',\n 2: 'Info',\n 3: 'Limited use',\n 4: 'Limited use',\n 5: 'Highly restricted'\n};\n\n/**\n * InstructionSeverityDisplay communicates the usage restrictions or\n * severity levels associated with a specific instruction or asset.\n *\n * ### Import\n *\n * ``` js\n * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'\n * // or\n * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'\n * ```\n */\nconst InstructionSeverityDisplay = React.forwardRef(function InstructionSeverityDisplay(\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 maxLines,\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
|
|
1
|
+
{"version":3,"file":"InstructionSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport SeverityBadge from '../../data/SeverityBadge/SeverityBadge';\nimport * as S from './InstructionSeverityDisplay.styled';\n\nconst defaultLabels = {\n 1: 'Info',\n 2: 'Info',\n 3: 'Limited use',\n 4: 'Limited use',\n 5: 'Highly restricted'\n};\n\n/**\n * InstructionSeverityDisplay communicates the usage restrictions or\n * severity levels associated with a specific instruction or asset.\n *\n * ### Import\n *\n * ``` js\n * import { InstructionSeverityDisplay } from '@ntbjs/react-components/widgets'\n * // or\n * import InstructionSeverityDisplay from '@ntbjs/react-components/widgets/InstructionSeverityDisplay'\n * ```\n */\nconst InstructionSeverityDisplay = React.forwardRef(function InstructionSeverityDisplay(\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 maxLines,\n thumbnail,\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 const hasThumbnail = thumbnail !== undefined;\n\n const content = (\n <>\n <SeverityBadge\n severity={severity}\n label={displayLabel}\n icon={icon}\n fontSize={badgeFontSize ? parseFloat(badgeFontSize) : undefined}\n />\n <S.InstructionText $fontSize={detailsFontSize} $maxLines={maxLines}>\n {maxLines ? <span title={instructionText}>{instructionText}</span> : instructionText}\n </S.InstructionText>\n </>\n );\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 $hasThumbnail={hasThumbnail}\n {...props}\n >\n {hasThumbnail && (\n <S.ThumbnailWrapper>\n {thumbnail && <S.ThumbnailImage src={thumbnail} alt=\"\" />}\n </S.ThumbnailWrapper>\n )}\n {hasThumbnail ? <S.ContentWrapper>{content}</S.ContentWrapper> : content}\n </S.Card>\n );\n});\n\nInstructionSeverityDisplay.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 /** Max number of lines for instruction text before clamping with ellipsis. */\n maxLines: PropTypes.number,\n /** URL of a thumbnail image to display on the left side of the card. Pass null to show a placeholder. Omit to show no thumbnail. */\n thumbnail: PropTypes.string\n};\n\nexport default InstructionSeverityDisplay;\n"],"names":["defaultLabels","InstructionSeverityDisplay","React","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","maxLines","thumbnail","props","forwardedRef","displayLabel","hasThumbnail","undefined","content","createElement","Fragment","SeverityBadge","label","fontSize","parseFloat","S","$fontSize","$maxLines","title","_extends","ref","$severity","$showCard","$padding","$bgLight","$bgDark","$hasThumbnail","src","alt","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","objectOf","element","bool","number"],"mappings":"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"}
|
|
@@ -8,8 +8,8 @@ const Card = styled.div.withConfig({
|
|
|
8
8
|
shouldForwardProp
|
|
9
9
|
}).attrs(applyDefaultTheme)`
|
|
10
10
|
display: flex;
|
|
11
|
-
flex-direction: column;
|
|
12
|
-
gap: 8px;
|
|
11
|
+
flex-direction: ${props => props.$hasThumbnail ? 'row' : 'column'};
|
|
12
|
+
gap: ${props => props.$hasThumbnail ? '12px' : '8px'};
|
|
13
13
|
align-items: flex-start;
|
|
14
14
|
padding: ${props => props.$padding || '14px 10px'};
|
|
15
15
|
${props => {
|
|
@@ -29,6 +29,34 @@ const Card = styled.div.withConfig({
|
|
|
29
29
|
${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}
|
|
30
30
|
`}
|
|
31
31
|
`;
|
|
32
|
+
const ThumbnailWrapper = styled.div.withConfig({
|
|
33
|
+
shouldForwardProp
|
|
34
|
+
}).attrs(applyDefaultTheme)`
|
|
35
|
+
flex-shrink: 0;
|
|
36
|
+
width: 56px;
|
|
37
|
+
height: 56px;
|
|
38
|
+
border-radius: 6px;
|
|
39
|
+
overflow: hidden;
|
|
40
|
+
${props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'))}
|
|
41
|
+
`;
|
|
42
|
+
const ThumbnailImage = styled.img.withConfig({
|
|
43
|
+
shouldForwardProp
|
|
44
|
+
})`
|
|
45
|
+
width: 100%;
|
|
46
|
+
height: 100%;
|
|
47
|
+
object-fit: cover;
|
|
48
|
+
display: block;
|
|
49
|
+
`;
|
|
50
|
+
const ContentWrapper = styled.div.withConfig({
|
|
51
|
+
shouldForwardProp
|
|
52
|
+
})`
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 8px;
|
|
56
|
+
align-items: flex-start;
|
|
57
|
+
flex: 1;
|
|
58
|
+
min-width: 0;
|
|
59
|
+
`;
|
|
32
60
|
const InstructionText = styled.p.withConfig({
|
|
33
61
|
shouldForwardProp
|
|
34
62
|
}).attrs(applyDefaultTheme)`
|
|
@@ -48,5 +76,5 @@ const InstructionText = styled.p.withConfig({
|
|
|
48
76
|
`}
|
|
49
77
|
`;
|
|
50
78
|
|
|
51
|
-
export { Card, InstructionText };
|
|
79
|
+
export { Card, ContentWrapper, InstructionText, ThumbnailImage, ThumbnailWrapper };
|
|
52
80
|
//# sourceMappingURL=InstructionSeverityDisplay.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InstructionSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.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 align-items: flex-start;\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 outline-offset: -1px;\n ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}\n `}\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 overflow-wrap: break-word;\n word-break: break-word;\n ${props =>\n props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n\n ${props =>\n props.$maxLines &&\n css`\n display: -webkit-box;\n -webkit-line-clamp: ${props.$maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","InstructionText","p","$fontSize","$maxLines"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,IAAI,GAAGC,MAAM,CAACC,GAAG,CAC3BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;
|
|
1
|
+
{"version":3,"file":"InstructionSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.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: ${props => (props.$hasThumbnail ? 'row' : 'column')};\n gap: ${props => (props.$hasThumbnail ? '12px' : '8px')};\n align-items: flex-start;\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 outline-offset: -1px;\n ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}\n `}\n`;\n\nexport const ThumbnailWrapper = styled.div\n .withConfig({ shouldForwardProp })\n .attrs(applyDefaultTheme)`\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n border-radius: 6px;\n overflow: hidden;\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-200')\n )}\n`;\n\nexport const ThumbnailImage = styled.img.withConfig({ shouldForwardProp })`\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n`;\n\nexport const ContentWrapper = styled.div.withConfig({ shouldForwardProp })`\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n flex: 1;\n min-width: 0;\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 overflow-wrap: break-word;\n word-break: break-word;\n ${props =>\n props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n\n ${props =>\n props.$maxLines &&\n css`\n display: -webkit-box;\n -webkit-line-clamp: ${props.$maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$hasThumbnail","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","ThumbnailWrapper","ThumbnailImage","img","ContentWrapper","InstructionText","p","$fontSize","$maxLines"],"mappings":"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"}
|