@elliemae/ds-banner 3.80.0-next.49 → 3.80.0-next.50
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/styles.js +3 -6
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/styles.js +3 -6
- package/dist/esm/styles.js.map +2 -2
- package/package.json +10 -10
package/dist/cjs/styles.js
CHANGED
|
@@ -54,18 +54,13 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
54
54
|
grid-template-columns: minmax(0, 1fr);
|
|
55
55
|
height: fit-content;
|
|
56
56
|
grid-template-rows: ${({ $isExpanded = true }) => $isExpanded ? "minmax(0, 1fr)" : "minmax(0, 0fr)"};
|
|
57
|
-
min-height: ${({ $isExpanded = true }) => $isExpanded ? "59px" : "0px"};
|
|
58
57
|
overflow: hidden;
|
|
59
|
-
transition:
|
|
60
|
-
grid-template-rows ${import_constants.BANNER_SLIDE_DURATION_MS}ms ease-in,
|
|
61
|
-
min-height ${import_constants.BANNER_SLIDE_DURATION_MS}ms ease-in;
|
|
58
|
+
transition: grid-template-rows ${import_constants.BANNER_SLIDE_DURATION_MS}ms ease-in;
|
|
62
59
|
@starting-style {
|
|
63
60
|
grid-template-rows: minmax(0, 0fr);
|
|
64
|
-
min-height: 0px;
|
|
65
61
|
}
|
|
66
62
|
& > * {
|
|
67
63
|
align-self: start;
|
|
68
|
-
min-height: 0;
|
|
69
64
|
overflow: hidden;
|
|
70
65
|
}
|
|
71
66
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -100,6 +95,8 @@ const StyledBannerLayout = (0, import_ds_system.styled)("div", {
|
|
|
100
95
|
slot: import_constants.DSBannerSlots.LAYOUT
|
|
101
96
|
})`
|
|
102
97
|
display: flex;
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
min-height: 59px;
|
|
103
100
|
width: 100%;
|
|
104
101
|
align-items: flex-start;
|
|
105
102
|
justify-content: space-between;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_SLIDE_DURATION_MS, BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,qBAAqB;AAErB,uBAA2C;AAC3C,2BAA6B;AAC7B,uBAAoF;
|
|
4
|
+
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_SLIDE_DURATION_MS, BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n width: 100%;\n min-width: 0;\n`;\n\nconst handleBorderColor = (\n type: DSBannerT.BannerTypesT,\n { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n switch (type) {\n case BANNER_TYPES.SUCCESS:\n return colors.success[900];\n case BANNER_TYPES.INFO:\n return colors.brand[600];\n case BANNER_TYPES.WARNING:\n return colors.warning[900];\n case BANNER_TYPES.DANGER:\n return colors.danger[900];\n default:\n return 'should_not_happen';\n }\n};\ninterface StyledBannerLayoutT {\n $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n display: flex;\n box-sizing: border-box;\n min-height: 59px;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n background-color: neutral-000;\n border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n & > :first-child {\n flex: 1;\n min-width: 0;\n }\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})`\n padding-top: 8px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\n// title, description and action link are the 3 children (in this order). Default layouts: the title and the description\n// share the first column and the action link is its own cell right after the text (the first column grows with the\n// text up to the free space, the link keeps its own width). Small layouts: a single column, the link goes on its own\n// row below the description.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n display: grid;\n grid-template-columns: ${(props) => (isSmallLayout(props) ? 'minmax(0, 1fr)' : 'minmax(0, max-content) auto')};\n justify-content: start;\n padding-top: 9px;\n & > :nth-child(-n + 2) {\n grid-column: 1;\n }\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n display: block;\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\n// the description carries the bottom spacing of the content area (Spec v2)\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n padding-bottom: 9px;\n`;\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n// its own cell of the StyledBody grid (never inline in the description), nested in DSTypography (link-sml-title variant).\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n ${(props) =>\n isSmallLayout(props)\n ? `\n justify-self: start;\n `\n : `\n grid-column: 2;\n grid-row: ${props.isBodyEmpty ? 1 : 2};\n align-self: end;\n align-self: last baseline;\n margin-left: 16px;\n `}\n /* Typography and underline of the action link (PUI-19233).\n Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link \"inline text\" styling:\n idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).\n PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not\n exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the\n baselines). Adjusting them once UX answers should only touch those two declarations. */\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n line-height: 1.278;\n text-decoration: underline;\n color: brand-600;\n &:hover {\n text-decoration: none;\n color: brand-800;\n }\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 2px;\n border: 2px solid brand-700;\n box-shadow: 0 0 0 1px brand-700;\n pointer-events: none;\n }\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n clip: rect(0 0 0 0);\n position: absolute;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -12,18 +12,13 @@ const StyledBannerContainer = styled("div", {
|
|
|
12
12
|
grid-template-columns: minmax(0, 1fr);
|
|
13
13
|
height: fit-content;
|
|
14
14
|
grid-template-rows: ${({ $isExpanded = true }) => $isExpanded ? "minmax(0, 1fr)" : "minmax(0, 0fr)"};
|
|
15
|
-
min-height: ${({ $isExpanded = true }) => $isExpanded ? "59px" : "0px"};
|
|
16
15
|
overflow: hidden;
|
|
17
|
-
transition:
|
|
18
|
-
grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in,
|
|
19
|
-
min-height ${BANNER_SLIDE_DURATION_MS}ms ease-in;
|
|
16
|
+
transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;
|
|
20
17
|
@starting-style {
|
|
21
18
|
grid-template-rows: minmax(0, 0fr);
|
|
22
|
-
min-height: 0px;
|
|
23
19
|
}
|
|
24
20
|
& > * {
|
|
25
21
|
align-self: start;
|
|
26
|
-
min-height: 0;
|
|
27
22
|
overflow: hidden;
|
|
28
23
|
}
|
|
29
24
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -58,6 +53,8 @@ const StyledBannerLayout = styled("div", {
|
|
|
58
53
|
slot: DSBannerSlots.LAYOUT
|
|
59
54
|
})`
|
|
60
55
|
display: flex;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
min-height: 59px;
|
|
61
58
|
width: 100%;
|
|
62
59
|
align-items: flex-start;
|
|
63
60
|
justify-content: space-between;
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_SLIDE_DURATION_MS, BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B,cAAc,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { ColorProps, LayoutProps, SizingProps, SpaceProps } from '@elliemae/ds-system';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { BANNER_SLIDE_DURATION_MS, BANNER_TYPES, DSBannerName, DSBannerSlots } from './constants/index.js';\nimport type { DSBannerT } from './react-desc-prop-types.js';\n\ninterface StyledBannerContainerT extends SizingProps, LayoutProps, SpaceProps, ColorProps {\n $isExpanded?: boolean;\n}\n// The slide animates the height of an intrinsically sized (auto height) element, which css can not interpolate with\n// \"height\" or \"max-height\" (auto/none are not interpolable, and min-height would clamp the collapsed state anyway).\n// Instead the single child (the layout, the live region lives in a portal) is the item of a one track grid whose row goes\n// from 0fr to 1fr: the row is always sized from the content so it follows wrapping, small layouts and text resize.\n// The tracks are minmax(0, Xfr) and not plain Xfr because the item has a border (the type color line): a plain 0fr track\n// can not be smaller than the item's border box, so it would collapse to 5px instead of 0.\n// The open slide is css only (@starting-style, the container mounts expanded), the close slide needs the container to\n// still be mounted when $isExpanded turns false, which is handled by useBannerExitAnimation.\n// The 59px minimum height is NOT set here but on the layout (the element that draws the bottom bar): the bar must be the bottom\n// edge of the banner, a min-height on the container would leave an empty box below it when the content is shorter (PUI-19295).\n// Being only on the item, the collapsing row (minmax(0, 0fr)) still clips it, so the slide needs no min-height transition.\nexport const StyledBannerContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})<StyledBannerContainerT>`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n height: fit-content;\n grid-template-rows: ${({ $isExpanded = true }) => ($isExpanded ? 'minmax(0, 1fr)' : 'minmax(0, 0fr)')};\n overflow: hidden;\n transition: grid-template-rows ${BANNER_SLIDE_DURATION_MS}ms ease-in;\n @starting-style {\n grid-template-rows: minmax(0, 0fr);\n }\n & > * {\n align-self: start;\n overflow: hidden;\n }\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n ${xStyledCommonProps}\n`;\n\ninterface StyledInnerContainerT {}\nexport const StyledInnerContainer = styled(Grid, {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})<StyledInnerContainerT>`\n padding-right: 4px;\n width: 100%;\n min-width: 0;\n`;\n\nconst handleBorderColor = (\n type: DSBannerT.BannerTypesT,\n { colors }: { colors: Record<string, Record<string, string>> },\n): string => {\n switch (type) {\n case BANNER_TYPES.SUCCESS:\n return colors.success[900];\n case BANNER_TYPES.INFO:\n return colors.brand[600];\n case BANNER_TYPES.WARNING:\n return colors.warning[900];\n case BANNER_TYPES.DANGER:\n return colors.danger[900];\n default:\n return 'should_not_happen';\n }\n};\ninterface StyledBannerLayoutT {\n $type: DSBannerT.BannerTypesT;\n}\nexport const StyledBannerLayout = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LAYOUT,\n})<StyledBannerLayoutT>`\n display: flex;\n box-sizing: border-box;\n min-height: 59px;\n width: 100%;\n align-items: flex-start;\n justify-content: space-between;\n background-color: neutral-000;\n border-bottom: 5px solid ${({ $type, theme }) => handleBorderColor($type, theme)};\n & > :first-child {\n flex: 1;\n min-width: 0;\n }\n`;\n\nexport const StyledIconContainer = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.ICON_CONTAINER,\n})`\n padding-top: 8px;\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n min-width: 0px;\n`;\n\nconst isSmallLayout = ({ theme }: { theme: { layoutMode?: string } }) => ['s', 'xs'].includes(theme.layoutMode!);\n\n// title, description and action link are the 3 children (in this order). Default layouts: the title and the description\n// share the first column and the action link is its own cell right after the text (the first column grows with the\n// text up to the free space, the link keeps its own width). Small layouts: a single column, the link goes on its own\n// row below the description.\nexport const StyledBody = styled('div', { name: DSBannerName, slot: DSBannerSlots.BODY })`\n display: grid;\n grid-template-columns: ${(props) => (isSmallLayout(props) ? 'minmax(0, 1fr)' : 'minmax(0, max-content) auto')};\n justify-content: start;\n padding-top: 9px;\n & > :nth-child(-n + 2) {\n grid-column: 1;\n }\n`;\n\nexport const StyledTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n display: block;\n color: neutral-700;\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n`;\n\n// the description carries the bottom spacing of the content area (Spec v2)\nexport const StyledSubTitle = styled(DSTypography, { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n overflow-wrap: break-word;\n white-space: pre-wrap;\n min-width: 0px;\n padding-bottom: 9px;\n`;\n\ninterface StyledActionLinkT {\n isBodyEmpty: boolean;\n}\n// its own cell of the StyledBody grid (never inline in the description), nested in DSTypography (link-sml-title variant).\nexport const StyledActionLink = styled(DSTypography, {\n name: DSBannerName,\n slot: DSBannerSlots.ACTION_LINK,\n})<StyledActionLinkT>`\n min-width: 0px;\n position: relative;\n margin-bottom: 9px;\n ${(props) =>\n isSmallLayout(props)\n ? `\n justify-self: start;\n `\n : `\n grid-column: 2;\n grid-row: ${props.isBodyEmpty ? 1 : 2};\n align-self: end;\n align-self: last baseline;\n margin-left: 16px;\n `}\n /* Typography and underline of the action link (PUI-19233).\n Size comes from the link-sml-title variant (set in DSBannerContent). The rest is the Link \"inline text\" styling:\n idle underline + brand-600, hover no underline + brand-800 (decided: the link is underlined at rest).\n PENDING UX CONFIRMATION: only font-weight (400 vs the variant's weight; the spec names a variant that does not\n exist) and line-height (the description's, the variant's 24px would make the banner taller and misalign the\n baselines). Adjusting them once UX answers should only touch those two declarations. */\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n line-height: 1.278;\n text-decoration: underline;\n color: brand-600;\n &:hover {\n text-decoration: none;\n color: brand-800;\n }\n &:focus {\n outline: none;\n &:after {\n position: absolute;\n content: '';\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 2px;\n border: 2px solid brand-700;\n box-shadow: 0 0 0 1px brand-700;\n pointer-events: none;\n }\n }\n`;\nexport const StyledCloseButton = styled(DSButtonV2, {\n name: DSBannerName,\n slot: DSBannerSlots.CLOSE_BUTTON,\n})`\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StyledLiveRegionPortal = styled('div', {\n name: DSBannerName,\n slot: DSBannerSlots.LIVE_REGION_PORTAL,\n})`\n clip: rect(0 0 0 0);\n position: absolute;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.80.0-next.
|
|
3
|
+
"version": "3.80.0-next.50",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -36,18 +36,18 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-button-v2": "3.80.0-next.
|
|
40
|
-
"@elliemae/ds-grid": "3.80.0-next.
|
|
41
|
-
"@elliemae/ds-icons": "3.80.0-next.
|
|
42
|
-
"@elliemae/ds-props-helpers": "3.80.0-next.
|
|
43
|
-
"@elliemae/ds-system": "3.80.0-next.
|
|
44
|
-
"@elliemae/ds-typescript-helpers": "3.80.0-next.
|
|
45
|
-
"@elliemae/ds-typography": "3.80.0-next.
|
|
39
|
+
"@elliemae/ds-button-v2": "3.80.0-next.50",
|
|
40
|
+
"@elliemae/ds-grid": "3.80.0-next.50",
|
|
41
|
+
"@elliemae/ds-icons": "3.80.0-next.50",
|
|
42
|
+
"@elliemae/ds-props-helpers": "3.80.0-next.50",
|
|
43
|
+
"@elliemae/ds-system": "3.80.0-next.50",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.80.0-next.50",
|
|
45
|
+
"@elliemae/ds-typography": "3.80.0-next.50",
|
|
46
46
|
"uid": "^2.0.2"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.80.0-next.
|
|
50
|
-
"@elliemae/ds-test-utils": "3.80.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.80.0-next.50",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.80.0-next.50",
|
|
51
51
|
"jest": "^30.0.0",
|
|
52
52
|
"styled-components": "~5.3.11"
|
|
53
53
|
},
|