@elliemae/ds-card-navigation 3.55.0-next.11 → 3.55.0-next.14
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/dist/cjs/config/useCardNavigation.js +1 -1
- package/dist/cjs/config/useCardNavigation.js.map +2 -2
- package/dist/cjs/constants/index.js +2 -1
- package/dist/cjs/constants/index.js.map +2 -2
- package/dist/cjs/parts/style.js +5 -2
- package/dist/cjs/parts/style.js.map +2 -2
- package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js +2 -1
- package/dist/cjs/parts/text-region/IconAndTextsRegionContent.js.map +2 -2
- package/dist/esm/config/useCardNavigation.js +1 -1
- package/dist/esm/config/useCardNavigation.js.map +2 -2
- package/dist/esm/constants/index.js +2 -1
- package/dist/esm/constants/index.js.map +2 -2
- package/dist/esm/parts/style.js +5 -2
- package/dist/esm/parts/style.js.map +2 -2
- package/dist/esm/parts/text-region/IconAndTextsRegionContent.js +2 -1
- package/dist/esm/parts/text-region/IconAndTextsRegionContent.js.map +2 -2
- package/dist/types/constants/index.d.ts +2 -0
- package/package.json +11 -11
|
@@ -40,7 +40,7 @@ var import_useValidateProps = require("./useValidateProps.js");
|
|
|
40
40
|
const useCardNavigation = (propsFromUser) => {
|
|
41
41
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
|
|
42
42
|
(0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSCardNavigationPropTypes);
|
|
43
|
-
const { title, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
|
|
43
|
+
const { title, type, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
|
|
44
44
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(globalPropsWithoutReusedReservedKeywords);
|
|
45
45
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
46
46
|
const instanceUid = import_react.default.useMemo(() => `ds-card-navigation-${(0, import_uid.uid)(5)}`, []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useCardNavigation.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n propsWithDefault: DSCardNavigationT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n instanceUid: string;\n iconAndTextsRegionIsFocused: boolean;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props): CardNavigationCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n // exclude `title` as
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,iBAAoB;AACpB,mCAAgF;AAChF,8BAAiC;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,uBAAmB,sDAA8D,eAAe,yCAAY;AAClH,gDAAiB,kBAAkB,sDAAyB;AAM5D,QAAM,EAAE,OAAO,GAAG,yCAAyC,IAAI;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n propsWithDefault: DSCardNavigationT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n instanceUid: string;\n iconAndTextsRegionIsFocused: boolean;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props): CardNavigationCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n // exclude `title` AND `type` as they are reused reserved keyword from global props,\n // we intend to \"consume\" those props, not \"spread\" in the html\n const { title, type, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;\n const globalProps = useGetGlobalAttributes(globalPropsWithoutReusedReservedKeywords);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const instanceUid = React.useMemo(() => `ds-card-navigation-${uid(5)}`, []);\n const [iconAndTextsRegionIsFocused, setIconAndTextsRegionIsFocused] = React.useState(false);\n const showFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIconAndTextsRegionIsFocused(true);\n }, []);\n const hideFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIconAndTextsRegionIsFocused(false);\n }, []);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n globalProps,\n instanceUid,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n }),\n [\n propsWithDefault,\n xstyledProps,\n globalProps,\n instanceUid,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAyF;AACzF,iBAAoB;AACpB,mCAAgF;AAChF,8BAAiC;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,uBAAmB,sDAA8D,eAAe,yCAAY;AAClH,gDAAiB,kBAAkB,sDAAyB;AAM5D,QAAM,EAAE,OAAO,MAAM,GAAG,yCAAyC,IAAI;AACrE,QAAM,kBAAc,gDAAuB,wCAAwC;AACnF,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,0BAAsB,gBAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,CAAC,6BAA6B,8BAA8B,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1F,QAAM,yBAAyB,aAAAA,QAAM,YAAqD,MAAM;AAC9F,mCAA+B,IAAI;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,QAAM,yBAAyB,aAAAA,QAAM,YAAqD,MAAM;AAC9F,mCAA+B,KAAK;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -43,7 +43,8 @@ const CARD_NAVIGATION_SLOTS = {
|
|
|
43
43
|
TITLE: "title",
|
|
44
44
|
ACTIONS: "actions",
|
|
45
45
|
TYPE: "type",
|
|
46
|
-
CENTRAL_CONTENT: "central-content"
|
|
46
|
+
CENTRAL_CONTENT: "central-content",
|
|
47
|
+
INTERACTIVE_ELEMENT_REGION: "interactive-element-region"
|
|
47
48
|
};
|
|
48
49
|
const CARD_NAVIGATION_DATA_TESTID = {
|
|
49
50
|
...(0, import_ds_system.slotObjectToDataTestIds)(DSCardNavigationName, CARD_NAVIGATION_SLOTS),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n ROOT: 'root',\n TITLE: 'title',\n ACTIONS: 'actions',\n TYPE: 'type',\n CENTRAL_CONTENT: 'central-content',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n BORROWER: 'borrower',\n FINANCIAL: 'financial',\n LOAN: 'loan',\n REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n ROOT: 'root',\n TITLE: 'title',\n ACTIONS: 'actions',\n TYPE: 'type',\n CENTRAL_CONTENT: 'central-content',\n INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n BORROWER: 'borrower',\n FINANCIAL: 'financial',\n LOAN: 'loan',\n REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAGO,MAAM,8BAA8B;AAAA,EACzC,OAAG,0CAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AACpB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/style.js
CHANGED
|
@@ -158,12 +158,15 @@ const StyledCardNavigationAction = (0, import_ds_system.styled)("div")`
|
|
|
158
158
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
159
159
|
}
|
|
160
160
|
`;
|
|
161
|
-
const StyledGridTextContainer = (0, import_ds_system.styled)("div"
|
|
161
|
+
const StyledGridTextContainer = (0, import_ds_system.styled)("div", {
|
|
162
|
+
name: import_constants.DSCardNavigationName,
|
|
163
|
+
slot: import_constants.CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION
|
|
164
|
+
})`
|
|
162
165
|
display: grid;
|
|
163
166
|
grid-template-columns: max-content auto;
|
|
164
167
|
align-items: center;
|
|
165
168
|
min-width: 0;
|
|
166
|
-
|
|
169
|
+
width: 100%;
|
|
167
170
|
overflow: hidden;
|
|
168
171
|
&:focus {
|
|
169
172
|
outline: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/style.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div')`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA4B;AAC5B,2BAA6B;AAC7B,uBAAiF;AAE1E,MAAM,uCAAmC,yBAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAEM,MAAM,4BAAwB,yBAAO,iCAAY;AAAA,WAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA,uBAGrC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,kCAA8B,yBAAO,iCAAY;AAAA,WACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,uBAGhC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,0CAA0C,wBAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,yCAAqC,yBAAO,qBAAM;AAAA,EAC7D,MAAM,uCAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA,aACY,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAMrC,MAAM,qCAAiC,yBAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYG,CAAC,UAAW,MAAM,QAAQ,gBAAgB,EAAG;AAAA,uBAC1B,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA,aAClD,CAAC,UAAW,MAAM,QAAQ,gBAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAW3C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAShD,CAAC,UACD,MAAM,+BACF;AAAA,+BACuB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA,YAGtD,sBAAK;AAAA;AAON,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMY,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKtB,CAAC,EAAE,MAAM,MAC1B,UAAU,qCAAoB,YAAY,aAC1C,UAAU,qCAAoB,aAAa,aAC3C,UAAU,qCAAoB,QAAQ,aACtC,UAAU,qCAAoB,cAAc,aAC7C,SAAS;AAAA;AAGN,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,uCAAsB;AAC9B,CAAC;AAAA,eACc,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA,SAIrC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAGjC,MAAM,iCAA6B,yBAAO,KAAK;AAAA;AAAA;AAAA,cAGxC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,YAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI7C,MAAM,8BAA0B,yBAAO,
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n &:focus {\n outline: none;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -54,12 +54,13 @@ const IconAndTextsRegionContent = import_react.default.memo((props) => {
|
|
|
54
54
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
55
55
|
import_style.StyledGridTextContainer,
|
|
56
56
|
{
|
|
57
|
+
"data-type": type,
|
|
57
58
|
role: "button",
|
|
58
59
|
tabIndex: 0,
|
|
59
60
|
onFocus: showFocusRingAroundAll,
|
|
60
61
|
onBlur: hideFocusRingAroundAll,
|
|
61
62
|
children: [
|
|
62
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationIcon, { $type: type,
|
|
63
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationIcon, { $type: type, role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: mainIconColor }) }),
|
|
63
64
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationCentralContent, { cols, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.StyledCardNavigationContentTitleWrapper, { children: [
|
|
64
65
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_style.StyledCardNavigationContentTitle, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
66
|
import_style.StyledTitleTypography,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/text-region/IconAndTextsRegionContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n } = props;\n\n return (\n <StyledGridTextContainer\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n >\n <StyledCardNavigationIcon $type={type}
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n >\n <StyledCardNavigationIcon $type={type} role=\"presentation\">\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent cols={cols}>\n <StyledCardNavigationContent>\n <StyledCardNavigationContentTitleWrapper>\n <StyledCardNavigationContentTitle>\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDf;AArDR,2BAAoC;AACpC,mBAAkB;AAClB,uBAA4C;AAE5C,mBASO;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAeZ,MAAM,4BAA4B,aAAAA,QAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MAER;AAAA,oDAAC,yCAAyB,OAAO,MAAM,MAAK,gBAC1C,sDAAC,QAAK,MAAK,KAAI,OAAO,eAAe,GACvC;AAAA,QAEA,4CAAC,mDAAmC,MAClC,sDAAC,4CACC,uDAAC,wDACC;AAAA,sDAAC,iDACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,yCAAoB;AAAA,cAE5B;AAAA;AAAA,UACH,GACF;AAAA,UACA,4CAAC,SACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,yCAAoB;AAAA,cAC7B,eAAa,6CAA4B;AAAA,cAExC;AAAA;AAAA,UACH,GACF;AAAA,WACF,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -7,7 +7,7 @@ import { useValidateProps } from "./useValidateProps.js";
|
|
|
7
7
|
const useCardNavigation = (propsFromUser) => {
|
|
8
8
|
const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
|
|
9
9
|
useValidateProps(propsWithDefault, DSCardNavigationPropTypes);
|
|
10
|
-
const { title, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
|
|
10
|
+
const { title, type, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;
|
|
11
11
|
const globalProps = useGetGlobalAttributes(globalPropsWithoutReusedReservedKeywords);
|
|
12
12
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
13
13
|
const instanceUid = React2.useMemo(() => `ds-card-navigation-${uid(5)}`, []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCardNavigation.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n propsWithDefault: DSCardNavigationT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n instanceUid: string;\n iconAndTextsRegionIsFocused: boolean;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props): CardNavigationCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n // exclude `title` as
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,8BAA8B,8BAA8B;AACzF,SAAS,WAAW;AACpB,SAAiC,2BAA2B,oBAAoB;AAChF,SAAS,wBAAwB;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,mBAAmB,6BAA8D,eAAe,YAAY;AAClH,mBAAiB,kBAAkB,yBAAyB;AAM5D,QAAM,EAAE,OAAO,GAAG,yCAAyC,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSCardNavigationT, DSCardNavigationPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface CardNavigationCTX {\n propsWithDefault: DSCardNavigationT.InternalProps;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n instanceUid: string;\n iconAndTextsRegionIsFocused: boolean;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const useCardNavigation = (propsFromUser: DSCardNavigationT.Props): CardNavigationCTX => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSCardNavigationT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSCardNavigationPropTypes);\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n // exclude `title` AND `type` as they are reused reserved keyword from global props,\n // we intend to \"consume\" those props, not \"spread\" in the html\n const { title, type, ...globalPropsWithoutReusedReservedKeywords } = propsWithDefault;\n const globalProps = useGetGlobalAttributes(globalPropsWithoutReusedReservedKeywords);\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const instanceUid = React.useMemo(() => `ds-card-navigation-${uid(5)}`, []);\n const [iconAndTextsRegionIsFocused, setIconAndTextsRegionIsFocused] = React.useState(false);\n const showFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIconAndTextsRegionIsFocused(true);\n }, []);\n const hideFocusRingAroundAll = React.useCallback<React.FocusEventHandler<HTMLDivElement>>(() => {\n setIconAndTextsRegionIsFocused(false);\n }, []);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n globalProps,\n instanceUid,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n }),\n [\n propsWithDefault,\n xstyledProps,\n globalProps,\n instanceUid,\n iconAndTextsRegionIsFocused,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,8BAA8B,8BAA8B;AACzF,SAAS,WAAW;AACpB,SAAiC,2BAA2B,oBAAoB;AAChF,SAAS,wBAAwB;AAY1B,MAAM,oBAAoB,CAAC,kBAA8D;AAI9F,QAAM,mBAAmB,6BAA8D,eAAe,YAAY;AAClH,mBAAiB,kBAAkB,yBAAyB;AAM5D,QAAM,EAAE,OAAO,MAAM,GAAG,yCAAyC,IAAI;AACrE,QAAM,cAAc,uBAAuB,wCAAwC;AACnF,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,sBAAsB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAC1E,QAAM,CAAC,6BAA6B,8BAA8B,IAAIA,OAAM,SAAS,KAAK;AAC1F,QAAM,yBAAyBA,OAAM,YAAqD,MAAM;AAC9F,mCAA+B,IAAI;AAAA,EACrC,GAAG,CAAC,CAAC;AACL,QAAM,yBAAyBA,OAAM,YAAqD,MAAM;AAC9F,mCAA+B,KAAK;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -6,7 +6,8 @@ const CARD_NAVIGATION_SLOTS = {
|
|
|
6
6
|
TITLE: "title",
|
|
7
7
|
ACTIONS: "actions",
|
|
8
8
|
TYPE: "type",
|
|
9
|
-
CENTRAL_CONTENT: "central-content"
|
|
9
|
+
CENTRAL_CONTENT: "central-content",
|
|
10
|
+
INTERACTIVE_ELEMENT_REGION: "interactive-element-region"
|
|
10
11
|
};
|
|
11
12
|
const CARD_NAVIGATION_DATA_TESTID = {
|
|
12
13
|
...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n ROOT: 'root',\n TITLE: 'title',\n ACTIONS: 'actions',\n TYPE: 'type',\n CENTRAL_CONTENT: 'central-content',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n BORROWER: 'borrower',\n FINANCIAL: 'financial',\n LOAN: 'loan',\n REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSCardNavigationName = 'DSCardnavigation';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_SLOTS = {\n ROOT: 'root',\n TITLE: 'title',\n ACTIONS: 'actions',\n TYPE: 'type',\n CENTRAL_CONTENT: 'central-content',\n INTERACTIVE_ELEMENT_REGION: 'interactive-element-region',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const CARD_NAVIGATION_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSCardNavigationName, CARD_NAVIGATION_SLOTS),\n DESCRIPTION_TEXT: 'ds-card-navigation--description',\n};\n\nexport const CardNavigationTypes = {\n BORROWER: 'borrower',\n FINANCIAL: 'financial',\n LOAN: 'loan',\n REGULATORY: 'regulatory',\n} as const;\n\nexport const CardNavigationTypesValues = Object.values(CardNavigationTypes);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,uBAAuB;AAG7B,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B;AAGO,MAAM,8BAA8B;AAAA,EACzC,GAAG,wBAAwB,sBAAsB,qBAAqB;AAAA,EACtE,kBAAkB;AACpB;AAEO,MAAM,sBAAsB;AAAA,EACjC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd;AAEO,MAAM,4BAA4B,OAAO,OAAO,mBAAmB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/style.js
CHANGED
|
@@ -115,12 +115,15 @@ const StyledCardNavigationAction = styled("div")`
|
|
|
115
115
|
fill: ${({ theme }) => theme.colors.neutral[500]};
|
|
116
116
|
}
|
|
117
117
|
`;
|
|
118
|
-
const StyledGridTextContainer = styled("div"
|
|
118
|
+
const StyledGridTextContainer = styled("div", {
|
|
119
|
+
name: DSCardNavigationName,
|
|
120
|
+
slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION
|
|
121
|
+
})`
|
|
119
122
|
display: grid;
|
|
120
123
|
grid-template-columns: max-content auto;
|
|
121
124
|
align-items: center;
|
|
122
125
|
min-width: 0;
|
|
123
|
-
|
|
126
|
+
width: 100%;
|
|
124
127
|
overflow: hidden;
|
|
125
128
|
&:focus {
|
|
126
129
|
outline: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/style.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div')`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,KAAK,cAAc;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB,qBAAqB,4BAA4B;AAE1E,MAAM,mCAAmC,OAAO,OAAO;AAAA,EAC5D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAEM,MAAM,wBAAwB,OAAO,YAAY;AAAA,WAC7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACtC,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA;AAAA,uBAGrC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,8BAA8B,OAAO,YAAY;AAAA,WACnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,uBAGhC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,0CAA0C,OAAO;AAAA;AAAA;AAIvD,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,qCAAqC,OAAO,MAAM;AAAA,EAC7D,MAAM,sBAAsB;AAAA,EAC5B,MAAM;AACR,CAAC;AAAA,aACY,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAMrC,MAAM,iCAAiC,OAAO,OAAO;AAAA,EAC1D,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYG,CAAC,UAAW,MAAM,QAAQ,gBAAgB,EAAG;AAAA,uBAC1B,CAAC,UAAU,MAAM,MAAM,YAAY,KAAK;AAAA,aAClD,CAAC,UAAW,MAAM,QAAQ,gBAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAW3C,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAShD,CAAC,UACD,MAAM,+BACF;AAAA,+BACuB,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA,YAGtD,KAAK;AAAA;AAON,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMY,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKtB,CAAC,EAAE,MAAM,MAC1B,UAAU,oBAAoB,YAAY,aAC1C,UAAU,oBAAoB,aAAa,aAC3C,UAAU,oBAAoB,QAAQ,aACtC,UAAU,oBAAoB,cAAc,aAC7C,SAAS;AAAA;AAGN,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,sBAAsB;AAC9B,CAAC;AAAA,eACc,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA,SAIrC,CAAC,UAAU,MAAM,MAAM,MAAM,EAAE;AAAA;AAGjC,MAAM,6BAA6B,OAAO,KAAK;AAAA;AAAA;AAAA,cAGxC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA,YAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAI7C,MAAM,0BAA0B,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { CARD_NAVIGATION_SLOTS, CardNavigationTypes, DSCardNavigationName } from '../constants/index.js';\n\nexport const StyledCardNavigationContentTitle = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TITLE,\n})``;\n\nexport const StyledTitleTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['700']};\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 1.3846rem; // 18px -> 18/13 = 1.3846rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 1.125rem; // 18px -> 18/16 = 1.125rem\n }\n`;\n\nexport const StyledDescriptionTypography = styled(DSTypography)`\n color: ${(props) => props.theme.colors.neutral['500']};\n font-size: 0.923rem; // 12px -> 12/13 = 0.923rem\n\n @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: 0.8775rem; // 12px -> 10.5/12 = 0.8775rem\n }\n`;\n\nexport const StyledCardNavigationContentTitleWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledCardNavigationContent = styled.div<{ wrapText?: boolean }>`\n display: flex;\n align-items: center;\n flex: 1;\n width: 100%;\n`;\n\nexport const StyledCardNavigationCentralContent = styled(Grid, {\n slot: CARD_NAVIGATION_SLOTS.CENTRAL_CONTENT,\n name: DSCardNavigationName,\n})<{ wrapText?: boolean; AnyOverFlow?: boolean }>`\n padding: ${(props) => props.theme.space.xs};\n`;\ninterface StyledCardNavigationBoxWrapperProps {\n fluid?: boolean;\n}\n\nexport const StyledCardNavigationBoxWrapper = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ROOT,\n})<StyledCardNavigationBoxWrapperProps & { $isIconAndTextsRegionFocused?: boolean }>`\n min-width: 240px;\n min-height: 64px;\n width: 337px;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n box-shadow: 0 1px 4px 0px rgba(37, 41, 47, 0.5);\n border-radius: 2px;\n position: relative;\n outline: none;\n\n ${(props) => (props.fluid ? 'width: 100%' : '')};\n @media (max-width: ${(props) => props.theme.breakpoints.small}) {\n width: ${(props) => (props.fluid ? 'width: 100%' : '414px')};\n }\n\n :after {\n display: block;\n content: '';\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n border: solid ${(props) => props.theme.space.xxs} transparent;\n border-radius: 2px;\n pointer-events: none;\n }\n &:hover {\n box-shadow: 0 3px 8px 0px rgba(37, 41, 47, 0.4);\n outline-offset: 2px;\n }\n\n ${(props) =>\n props.$isIconAndTextsRegionFocused\n ? css`\n outline: 2px solid ${props.theme.colors.brand['700']};\n outline-offset: 2px;\n `\n : css``}\n`;\n\ninterface StyledCardNavigationIconProps {\n $type: (typeof CardNavigationTypes)[keyof typeof CardNavigationTypes];\n}\n\nexport const StyledCardNavigationIcon = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.TYPE,\n})<StyledCardNavigationIconProps>`\n min-width: 64px;\n min-height: 64px;\n height: 100%;\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n padding: ${(props) => props.theme.space.xs};\n display: flex;\n align-items: center;\n justify-content: center;\n fill: #ffffff;\n background-color: ${({ $type }) =>\n ($type === CardNavigationTypes.BORROWER && '#32aad1') ||\n ($type === CardNavigationTypes.FINANCIAL && '#1ba88d') ||\n ($type === CardNavigationTypes.LOAN && '#8e49b2') ||\n ($type === CardNavigationTypes.REGULATORY && '#db5575') ||\n '#32aad1'};\n`;\n\nexport const StyledCardNavigationActions = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.ACTIONS,\n})`\n padding: 0 ${(props) => props.theme.space.xs};\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledCardNavigationAction = styled('div')`\n span,\n svg {\n height: ${({ theme }) => theme.space.s};\n width: ${({ theme }) => theme.space.s};\n fill: ${({ theme }) => theme.colors.neutral[500]};\n }\n`;\n\nexport const StyledGridTextContainer = styled('div', {\n name: DSCardNavigationName,\n slot: CARD_NAVIGATION_SLOTS.INTERACTIVE_ELEMENT_REGION,\n})`\n display: grid;\n grid-template-columns: max-content auto;\n align-items: center;\n min-width: 0;\n width: 100%;\n overflow: hidden;\n &:focus {\n outline: none;\n }\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,12 +30,13 @@ const IconAndTextsRegionContent = React2.memo((props) => {
|
|
|
30
30
|
return /* @__PURE__ */ jsxs(
|
|
31
31
|
StyledGridTextContainer,
|
|
32
32
|
{
|
|
33
|
+
"data-type": type,
|
|
33
34
|
role: "button",
|
|
34
35
|
tabIndex: 0,
|
|
35
36
|
onFocus: showFocusRingAroundAll,
|
|
36
37
|
onBlur: hideFocusRingAroundAll,
|
|
37
38
|
children: [
|
|
38
|
-
/* @__PURE__ */ jsx(StyledCardNavigationIcon, { $type: type,
|
|
39
|
+
/* @__PURE__ */ jsx(StyledCardNavigationIcon, { $type: type, role: "presentation", children: /* @__PURE__ */ jsx(Icon, { size: "l", color: mainIconColor }) }),
|
|
39
40
|
/* @__PURE__ */ jsx(StyledCardNavigationCentralContent, { cols, children: /* @__PURE__ */ jsx(StyledCardNavigationContent, { children: /* @__PURE__ */ jsxs(StyledCardNavigationContentTitleWrapper, { children: [
|
|
40
41
|
/* @__PURE__ */ jsx(StyledCardNavigationContentTitle, { children: /* @__PURE__ */ jsx(
|
|
41
42
|
StyledTitleTypography,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/text-region/IconAndTextsRegionContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n } = props;\n\n return (\n <StyledGridTextContainer\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n >\n <StyledCardNavigationIcon $type={type}
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { SvgIconT } from '@elliemae/ds-icons';\nimport { TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport React from 'react';\nimport { CARD_NAVIGATION_DATA_TESTID } from '../../constants/index.js';\nimport type { DSCardNavigationT } from '../../react-desc-prop-types.js';\nimport {\n StyledCardNavigationCentralContent,\n StyledCardNavigationContent,\n StyledCardNavigationContentTitle,\n StyledCardNavigationContentTitleWrapper,\n StyledCardNavigationIcon,\n StyledDescriptionTypography,\n StyledGridTextContainer,\n StyledTitleTypography,\n} from '../style.js';\n\nconst mainIconColor = ['neutral', '0'] as SvgIconT.ColorType;\nconst cols = ['1fr'];\n\ninterface IconAndTextsRegionContentProps {\n title: DSCardNavigationT.InternalProps['title'];\n description: DSCardNavigationT.InternalProps['description'];\n wrapText: DSCardNavigationT.InternalProps['wrapText'];\n type: DSCardNavigationT.InternalProps['type'];\n Icon: DSCardNavigationT.InternalProps['Icon'];\n\n titleHandleRef: (node: HTMLElement | null) => void;\n descriptionHandleRef: (node: HTMLElement | null) => void;\n showFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n hideFocusRingAroundAll: React.FocusEventHandler<HTMLDivElement>;\n}\n\nexport const IconAndTextsRegionContent = React.memo((props: IconAndTextsRegionContentProps) => {\n const {\n title,\n description,\n wrapText,\n titleHandleRef,\n descriptionHandleRef,\n type,\n Icon,\n showFocusRingAroundAll,\n hideFocusRingAroundAll,\n } = props;\n\n return (\n <StyledGridTextContainer\n data-type={type}\n role=\"button\"\n tabIndex={0}\n onFocus={showFocusRingAroundAll}\n onBlur={hideFocusRingAroundAll}\n >\n <StyledCardNavigationIcon $type={type} role=\"presentation\">\n <Icon size=\"l\" color={mainIconColor} />\n </StyledCardNavigationIcon>\n\n <StyledCardNavigationCentralContent cols={cols}>\n <StyledCardNavigationContent>\n <StyledCardNavigationContentTitleWrapper>\n <StyledCardNavigationContentTitle>\n <StyledTitleTypography\n innerRef={titleHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n >\n {title}\n </StyledTitleTypography>\n </StyledCardNavigationContentTitle>\n <div>\n <StyledDescriptionTypography\n innerRef={descriptionHandleRef}\n truncateWithEllipsis={!wrapText}\n variant={TYPOGRAPHY_VARIANTS.B1}\n data-testid={CARD_NAVIGATION_DATA_TESTID.DESCRIPTION_TEXT}\n >\n {description}\n </StyledDescriptionTypography>\n </div>\n </StyledCardNavigationContentTitleWrapper>\n </StyledCardNavigationContent>\n </StyledCardNavigationCentralContent>\n </StyledGridTextContainer>\n );\n});\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsDf,cAKE,YALF;AArDR,SAAS,2BAA2B;AACpC,OAAOA,YAAW;AAClB,SAAS,mCAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,gBAAgB,CAAC,WAAW,GAAG;AACrC,MAAM,OAAO,CAAC,KAAK;AAeZ,MAAM,4BAA4BA,OAAM,KAAK,CAAC,UAA0C;AAC7F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MAER;AAAA,4BAAC,4BAAyB,OAAO,MAAM,MAAK,gBAC1C,8BAAC,QAAK,MAAK,KAAI,OAAO,eAAe,GACvC;AAAA,QAEA,oBAAC,sCAAmC,MAClC,8BAAC,+BACC,+BAAC,2CACC;AAAA,8BAAC,oCACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,oBAAoB;AAAA,cAE5B;AAAA;AAAA,UACH,GACF;AAAA,UACA,oBAAC,SACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV,sBAAsB,CAAC;AAAA,cACvB,SAAS,oBAAoB;AAAA,cAC7B,eAAa,4BAA4B;AAAA,cAExC;AAAA;AAAA,UACH,GACF;AAAA,WACF,GACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -5,6 +5,7 @@ export declare const CARD_NAVIGATION_SLOTS: {
|
|
|
5
5
|
readonly ACTIONS: "actions";
|
|
6
6
|
readonly TYPE: "type";
|
|
7
7
|
readonly CENTRAL_CONTENT: "central-content";
|
|
8
|
+
readonly INTERACTIVE_ELEMENT_REGION: "interactive-element-region";
|
|
8
9
|
};
|
|
9
10
|
export declare const CARD_NAVIGATION_DATA_TESTID: {
|
|
10
11
|
DESCRIPTION_TEXT: string;
|
|
@@ -13,6 +14,7 @@ export declare const CARD_NAVIGATION_DATA_TESTID: {
|
|
|
13
14
|
ACTIONS: "ds-cardnavigation-actions";
|
|
14
15
|
TYPE: "ds-cardnavigation-type";
|
|
15
16
|
CENTRAL_CONTENT: "ds-cardnavigation-central-content";
|
|
17
|
+
INTERACTIVE_ELEMENT_REGION: "ds-cardnavigation-interactive-element-region";
|
|
16
18
|
};
|
|
17
19
|
export declare const CardNavigationTypes: {
|
|
18
20
|
readonly BORROWER: "borrower";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-card-navigation",
|
|
3
|
-
"version": "3.55.0-next.
|
|
3
|
+
"version": "3.55.0-next.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Card Navigation",
|
|
6
6
|
"files": [
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@xstyled/styled-components": "~3.7.3",
|
|
40
|
-
"@elliemae/ds-grid": "3.55.0-next.
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
40
|
+
"@elliemae/ds-grid": "3.55.0-next.14",
|
|
41
|
+
"@elliemae/ds-hooks-on-blur-out": "3.55.0-next.14",
|
|
42
|
+
"@elliemae/ds-hooks-on-overflow-change": "3.55.0-next.14",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.55.0-next.14",
|
|
44
|
+
"@elliemae/ds-icons": "3.55.0-next.14",
|
|
45
|
+
"@elliemae/ds-system": "3.55.0-next.14"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@elliemae/pui-cli": "9.0.0-next.65",
|
|
49
49
|
"@playwright/experimental-ct-react": "^1.51.1",
|
|
50
50
|
"jest": "~29.7.0",
|
|
51
51
|
"styled-components": "~5.3.9",
|
|
52
|
-
"@elliemae/ds-monorepo-devops": "3.55.0-next.
|
|
53
|
-
"@elliemae/ds-icons": "3.55.0-next.
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
52
|
+
"@elliemae/ds-monorepo-devops": "3.55.0-next.14",
|
|
53
|
+
"@elliemae/ds-icons": "3.55.0-next.14",
|
|
54
|
+
"@elliemae/ds-typescript-helpers": "3.55.0-next.14",
|
|
55
|
+
"@elliemae/ds-test-utils": "3.55.0-next.14"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
58
|
"@testing-library/jest-dom": "^6.6.3",
|