@veeqo/ui 14.5.0-beta-3 → 14.6.0
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/components/Banner/Banner.cjs +17 -13
- package/dist/components/Banner/Banner.cjs.map +1 -1
- package/dist/components/Banner/Banner.d.ts +1 -1
- package/dist/components/Banner/Banner.js +17 -13
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Banner/Banner.module.scss.cjs +9 -0
- package/dist/components/Banner/Banner.module.scss.cjs.map +1 -0
- package/dist/components/Banner/Banner.module.scss.js +7 -0
- package/dist/components/Banner/Banner.module.scss.js.map +1 -0
- package/dist/components/Banner/types.d.ts +0 -7
- package/dist/components/Button/Button.cjs +16 -30
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +0 -8
- package/dist/components/Button/Button.js +16 -30
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/components/styled.cjs +72 -0
- package/dist/components/Button/components/styled.cjs.map +1 -0
- package/dist/components/Button/components/styled.d.ts +20 -0
- package/dist/components/Button/components/styled.js +58 -0
- package/dist/components/Button/components/styled.js.map +1 -0
- package/dist/components/Button/types.d.ts +1 -9
- package/dist/components/DataGrid/DataGrid.module.scss.cjs.map +1 -1
- package/dist/components/DataGrid/DataGrid.module.scss.js.map +1 -1
- package/dist/components/FeatureBanner/FeatureBanner.cjs +11 -10
- package/dist/components/FeatureBanner/FeatureBanner.cjs.map +1 -1
- package/dist/components/FeatureBanner/FeatureBanner.d.ts +4 -2
- package/dist/components/FeatureBanner/FeatureBanner.js +11 -10
- package/dist/components/FeatureBanner/FeatureBanner.js.map +1 -1
- package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs +2 -2
- package/dist/components/FeatureBanner/FeatureBanner.module.scss.cjs.map +1 -1
- package/dist/components/FeatureBanner/FeatureBanner.module.scss.js +2 -2
- package/dist/components/FeatureBanner/FeatureBanner.module.scss.js.map +1 -1
- package/dist/components/FeatureBanner/index.d.ts +1 -1
- package/dist/components/FeatureBanner/types.d.ts +10 -8
- package/dist/components/Pagination/styled.d.ts +0 -4
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs +5 -6
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.cjs.map +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.d.ts +4 -4
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js +5 -5
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.js.map +1 -1
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.cjs +9 -0
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.cjs.map +1 -0
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.js +7 -0
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.module.scss.js.map +1 -0
- package/dist/components/VideoModal/styled.d.ts +0 -4
- package/dist/theme/index.js +1 -1
- package/package.json +2 -2
- package/dist/components/Banner/styled.cjs +0 -49
- package/dist/components/Banner/styled.cjs.map +0 -1
- package/dist/components/Banner/styled.d.ts +0 -20
- package/dist/components/Banner/styled.js +0 -37
- package/dist/components/Banner/styled.js.map +0 -1
- package/dist/components/Button/Button.module.scss.cjs +0 -9
- package/dist/components/Button/Button.module.scss.cjs.map +0 -1
- package/dist/components/Button/Button.module.scss.js +0 -7
- package/dist/components/Button/Button.module.scss.js.map +0 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
import { theme } from '../../../theme/index.js';
|
|
3
|
+
import { sizes } from '../../../theme/modules/sizes.js';
|
|
4
|
+
|
|
5
|
+
const MainContent = styled.span.withConfig({ displayName: "vui--MainContent", componentId: "vui--exbqdz" }) `display:inline-flex;align-items:center;gap:${({ hasText }) => (hasText ? '8px' : '4px')};${({ $loading }) => ($loading ? 'opacity: 0;' : null)};svg{width:${({ size }) => sizes[size]};height:${({ size }) => sizes[size]};}`;
|
|
6
|
+
const BaseButton = styled.button.withConfig({ displayName: "vui--BaseButton", componentId: "vui--nvz516" }) `position:relative;box-sizing:border-box;appearance:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:${theme.fontFamily};font-weight:400;border:1px solid;background-color:transparent;white-space:nowrap;${(props) => {
|
|
7
|
+
let height = '40px';
|
|
8
|
+
let paddingLeft = '24px';
|
|
9
|
+
let paddingRight = '24px';
|
|
10
|
+
let borderRadius = '8px';
|
|
11
|
+
let fontSize = '16px';
|
|
12
|
+
let outlineWidth = '4px';
|
|
13
|
+
if (props.hasIcon) {
|
|
14
|
+
paddingLeft = '16px';
|
|
15
|
+
}
|
|
16
|
+
if (props.hasDropdown) {
|
|
17
|
+
paddingRight = '16px';
|
|
18
|
+
}
|
|
19
|
+
if (props.size === 'sm') {
|
|
20
|
+
height = '32px';
|
|
21
|
+
paddingLeft = '16px';
|
|
22
|
+
paddingRight = '16px';
|
|
23
|
+
borderRadius = '4px';
|
|
24
|
+
fontSize = '14px';
|
|
25
|
+
outlineWidth = '2px';
|
|
26
|
+
if (props.hasIcon) {
|
|
27
|
+
paddingLeft = '8px';
|
|
28
|
+
}
|
|
29
|
+
if (props.hasDropdown) {
|
|
30
|
+
paddingRight = '8px';
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
if (!props.hasText) {
|
|
34
|
+
paddingLeft = '8px';
|
|
35
|
+
paddingRight = '8px';
|
|
36
|
+
}
|
|
37
|
+
return `
|
|
38
|
+
--outline-width: ${outlineWidth};
|
|
39
|
+
|
|
40
|
+
height: ${height};
|
|
41
|
+
padding-left: ${paddingLeft};
|
|
42
|
+
padding-right: ${paddingRight};
|
|
43
|
+
border-radius: ${borderRadius};
|
|
44
|
+
font-size: ${fontSize};
|
|
45
|
+
line-height: ${fontSize};
|
|
46
|
+
`;
|
|
47
|
+
}} &:hover{cursor:pointer;}&:disabled{pointer-events:none;cursor:unset !important;}`;
|
|
48
|
+
const DefaultButton = styled(BaseButton).withConfig({ displayName: "vui--DefaultButton", componentId: "vui--1xzjfje" }) `border-color:${theme.colors.neutral.grey.dark};background-color:white;box-shadow:0 1px 3px rgba(55, 66, 77, 0.15);color:${({ hasText }) => hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};&:hover{background-color:${theme.colors.neutral.grey.lightest};}&:active{background-color:${theme.colors.neutral.grey.lightest};border-color:${theme.colors.secondary.blue.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{box-shadow:none !important;background-color:${theme.colors.neutral.grey.base} !important;border-color:${theme.colors.neutral.grey.base} !important;color:${theme.colors.neutral.ink.light} !important;}`;
|
|
49
|
+
const DefaultDestructiveButton = styled(DefaultButton).withConfig({ displayName: "vui--DefaultDestructiveButton", componentId: "vui--1ixaf03" }) `color:${theme.colors.secondary.red.base};&:hover{color:${theme.colors.secondary.red.dark};}&:active{border-color:${theme.colors.secondary.red.base};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};color:${theme.colors.secondary.red.dark};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
|
|
50
|
+
const PrimaryButton = styled(DefaultButton).withConfig({ displayName: "vui--PrimaryButton", componentId: "vui--16w0ufk" }) `background-color:var(--theme-primary, ${theme.colors.secondary.blue.base});border-color:var(--theme-primary, ${theme.colors.secondary.blue.base});color:var(--theme-on-primary, white);&:hover{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});}&:active{background-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});border-color:var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}`;
|
|
51
|
+
const PrimaryDestructiveButton = styled(PrimaryButton).withConfig({ displayName: "vui--PrimaryDestructiveButton", componentId: "vui--1w3lv3r" }) `background-color:${theme.colors.secondary.red.base};border-color:${theme.colors.secondary.red.base};color:white;&:hover{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};}&:active{background-color:${theme.colors.secondary.red.dark};border-color:${theme.colors.secondary.red.dark};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.red.light};}`;
|
|
52
|
+
const FlatButton = styled(BaseButton).withConfig({ displayName: "vui--FlatButton", componentId: "vui--fqczse" }) `border-color:transparent;box-shadow:none;color:${theme.colors.neutral.ink.base};&:hover{background-color:${theme.colors.neutral.grey.light};}&:active{background-color:${theme.colors.neutral.grey.light};box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};}&:focus-visible{box-shadow:0 0 0 var(--outline-width)${theme.colors.secondary.blue.light};outline:0;}&:disabled{background-color:transparent;border-color:transparent;}`;
|
|
53
|
+
const UnstyledButton = styled.button.withConfig({ displayName: "vui--UnstyledButton", componentId: "vui--1fxilc" }) `appearance:none;border:0;background-color:transparent;padding:0;font:inherit;&:hover{cursor:pointer;}`;
|
|
54
|
+
const LinkButton = styled(UnstyledButton).withConfig({ displayName: "vui--LinkButton", componentId: "vui--z932nb" }) `display:inline-flex;flex-direction:row;align-items:center;font-family:${theme.text.link.fontFamily};font-size:${theme.text.link.fontSize};line-height:${theme.text.link.fontSize};font-weight:${theme.text.link.fontWeight};line-height:${theme.text.link.lineHeight};text-decoration:${theme.text.link.textDecoration};color:${theme.colors.secondary.blue.base};&:hover{color:${theme.colors.secondary.blue.dark};}& > * + *{margin-left:${theme.sizes.xs};}&:focus-visible{outline:0;box-shadow:0 0 0 4px white,0 0 0 8px ${theme.colors.secondary.blue.light};border-radius:4px;}`;
|
|
55
|
+
const LoadingWrapper = styled.div.withConfig({ displayName: "vui--LoadingWrapper", componentId: "vui--1qt232p" }) `position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin-left:0;`;
|
|
56
|
+
|
|
57
|
+
export { DefaultButton, DefaultDestructiveButton, FlatButton, LinkButton, LoadingWrapper, MainContent, PrimaryButton, PrimaryDestructiveButton, UnstyledButton };
|
|
58
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../src/components/Button/components/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../../theme';\nimport { sizes } from '../../../theme/modules/sizes';\n\ninterface ButtonDisplayProps {\n size: 'sm' | 'base';\n hasText: boolean;\n hasIcon: boolean;\n hasDropdown: boolean;\n}\n\nexport const MainContent = styled.span<{\n $loading?: boolean;\n hasText: boolean;\n size: 'base' | 'md';\n}>`\n display: inline-flex;\n align-items: center;\n\n gap: ${({ hasText }) => (hasText ? '8px' : '4px')};\n ${({ $loading }) => ($loading ? 'opacity: 0;' : null)};\n\n svg {\n width: ${({ size }) => sizes[size]};\n height: ${({ size }) => sizes[size]};\n }\n`;\n\nconst BaseButton = styled.button<ButtonDisplayProps>`\n position: relative;\n box-sizing: border-box;\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-family: ${theme.fontFamily};\n font-weight: 400;\n border: 1px solid;\n background-color: transparent;\n white-space: nowrap;\n\n ${(props) => {\n let height = '40px';\n let paddingLeft = '24px';\n let paddingRight = '24px';\n let borderRadius = '8px';\n let fontSize = '16px';\n let outlineWidth = '4px';\n\n if (props.hasIcon) {\n paddingLeft = '16px';\n }\n\n if (props.hasDropdown) {\n paddingRight = '16px';\n }\n\n if (props.size === 'sm') {\n height = '32px';\n paddingLeft = '16px';\n paddingRight = '16px';\n borderRadius = '4px';\n fontSize = '14px';\n outlineWidth = '2px';\n\n if (props.hasIcon) {\n paddingLeft = '8px';\n }\n\n if (props.hasDropdown) {\n paddingRight = '8px';\n }\n }\n\n if (!props.hasText) {\n paddingLeft = '8px';\n paddingRight = '8px';\n }\n\n return `\n --outline-width: ${outlineWidth};\n\n height: ${height};\n padding-left: ${paddingLeft};\n padding-right: ${paddingRight};\n border-radius: ${borderRadius};\n font-size: ${fontSize};\n line-height: ${fontSize};\n `;\n }}\n\n &:hover {\n cursor: pointer;\n }\n\n &:disabled {\n pointer-events: none;\n cursor: unset !important;\n }\n`;\n\nexport const DefaultButton = styled(BaseButton as any)`\n border-color: ${theme.colors.neutral.grey.dark};\n background-color: white;\n box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);\n color: ${({ hasText }) =>\n hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};\n\n &:hover {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n &:active {\n background-color: ${theme.colors.neutral.grey.lightest};\n border-color: ${theme.colors.secondary.blue.base};\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none !important;\n background-color: ${theme.colors.neutral.grey.base} !important;\n border-color: ${theme.colors.neutral.grey.base} !important;\n color: ${theme.colors.neutral.ink.light} !important;\n }\n`;\n\nexport const DefaultDestructiveButton = styled(DefaultButton as any)`\n color: ${theme.colors.secondary.red.base};\n\n &:hover {\n color: ${theme.colors.secondary.red.dark};\n }\n\n &:active {\n border-color: ${theme.colors.secondary.red.base};\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n color: ${theme.colors.secondary.red.dark};\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n }\n`;\n\nexport const PrimaryButton = styled(DefaultButton as any)`\n background-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n border-color: var(--theme-primary, ${theme.colors.secondary.blue.base});\n color: var(--theme-on-primary, white);\n\n &:hover {\n background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n }\n\n &:active {\n background-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n border-color: var(--theme-primary-hover, ${theme.colors.secondary.blue.dark});\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n }\n`;\n\nexport const PrimaryDestructiveButton = styled(PrimaryButton as any)`\n background-color: ${theme.colors.secondary.red.base};\n border-color: ${theme.colors.secondary.red.base};\n color: white;\n\n &:hover {\n background-color: ${theme.colors.secondary.red.dark};\n border-color: ${theme.colors.secondary.red.dark};\n }\n\n &:active {\n background-color: ${theme.colors.secondary.red.dark};\n border-color: ${theme.colors.secondary.red.dark};\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};\n }\n`;\n\nexport const FlatButton = styled(BaseButton as any)`\n border-color: transparent;\n box-shadow: none;\n color: ${theme.colors.neutral.ink.base};\n\n &:hover {\n background-color: ${theme.colors.neutral.grey.light};\n }\n\n &:active {\n background-color: ${theme.colors.neutral.grey.light};\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};\n outline: 0;\n }\n\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n }\n`;\n\nexport const UnstyledButton = styled.button`\n appearance: none;\n border: 0;\n background-color: transparent;\n padding: 0;\n font: inherit;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n\n font-family: ${theme.text.link.fontFamily};\n font-size: ${theme.text.link.fontSize};\n line-height: ${theme.text.link.fontSize};\n font-weight: ${theme.text.link.fontWeight};\n line-height: ${theme.text.link.lineHeight};\n text-decoration: ${theme.text.link.textDecoration};\n color: ${theme.colors.secondary.blue.base};\n\n &:hover {\n color: ${theme.colors.secondary.blue.dark};\n }\n\n & > * + * {\n margin-left: ${theme.sizes.xs};\n }\n\n &:focus-visible {\n outline: 0;\n box-shadow:\n 0 0 0 4px white,\n 0 0 0 8px ${theme.colors.secondary.blue.light};\n border-radius: 4px;\n }\n`;\n\nexport const LoadingWrapper = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n`;\n"],"names":[],"mappings":";;;;AAWO,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,2CAAA,EAQ7B,CAAC,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,CAAA,CAAA,EAC/C,CAAC,EAAE,QAAQ,EAAE,MAAM,QAAQ,GAAG,aAAa,GAAG,IAAI,CAAC,CAAA,WAAA,EAG1C,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC,CAAA,QAAA,EACxB,CAAC,EAAE,IAAI,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC;AAIvC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,yIAAA,EAQf,KAAK,CAAC,UAAU,CAAA,kFAAA,EAM7B,CAAC,KAAK,KAAI;IACV,IAAI,MAAM,GAAG,MAAM;IACnB,IAAI,WAAW,GAAG,MAAM;IACxB,IAAI,YAAY,GAAG,MAAM;IACzB,IAAI,YAAY,GAAG,KAAK;IACxB,IAAI,QAAQ,GAAG,MAAM;IACrB,IAAI,YAAY,GAAG,KAAK;IAExB,IAAI,KAAK,CAAC,OAAO,EAAE;QACjB,WAAW,GAAG,MAAM;AACrB,IAAA;IAED,IAAI,KAAK,CAAC,WAAW,EAAE;QACrB,YAAY,GAAG,MAAM;AACtB,IAAA;AAED,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE;QACvB,MAAM,GAAG,MAAM;QACf,WAAW,GAAG,MAAM;QACpB,YAAY,GAAG,MAAM;QACrB,YAAY,GAAG,KAAK;QACpB,QAAQ,GAAG,MAAM;QACjB,YAAY,GAAG,KAAK;QAEpB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,WAAW,GAAG,KAAK;AACpB,QAAA;QAED,IAAI,KAAK,CAAC,WAAW,EAAE;YACrB,YAAY,GAAG,KAAK;AACrB,QAAA;AACF,IAAA;AAED,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;QAClB,WAAW,GAAG,KAAK;QACnB,YAAY,GAAG,KAAK;AACrB,IAAA;IAED,OAAO;yBACc,YAAY,CAAA;;gBAErB,MAAM,CAAA;sBACA,WAAW,CAAA;uBACV,YAAY,CAAA;uBACZ,YAAY,CAAA;mBAChB,QAAQ,CAAA;qBACN,QAAQ,CAAA;KACxB;AACH,CAAC,mFAUF;AAEM,MAAM,aAAa,GAAG,MAAM,CAAC,UAAiB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EACpC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,0EAAA,EAGrC,CAAC,EAAE,OAAO,EAAE,KACnB,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,0BAAA,EAGtD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,4BAAA,EAIlC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA,cAAA,EACtC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sCAAA,EACP,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,mEAAA,EAMtD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,yBAAA,EAClC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,kBAAA,EACrC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK;AAIpC,MAAM,wBAAwB,GAAG,MAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACzD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,eAAA,EAG7B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,wBAAA,EAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,sCAAA,EACN,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,OAAA,EAChE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,0DAIC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK;AAItE,MAAM,aAAa,GAAG,MAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,sCAAA,EACd,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,uCACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,2FAAA,EAIpB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,6CACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,wDAAA,EAI5B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,6CACpC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,uCAAA,EAClC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAIvE,MAAM,wBAAwB,GAAG,MAAM,CAAC,aAAoB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAC9C,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,sCAAA,EAIzB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,4BAAA,EAI3B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,iBACnC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAA,sCAAA,EACN,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAA,uDAAA,EAIhC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK;AAItE,MAAM,UAAU,GAAG,MAAM,CAAC,UAAiB,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,+CAAA,EAGxC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAA,0BAAA,EAGhB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,4BAAA,EAI/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,sCAAA,EACV,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,8EAAA;MAUjE,cAAc,GAAG,MAAM,CAAC,MAAM;MAY9B,UAAU,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sEAAA,EAK/B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,cAC5B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EACxB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,gBAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,iBAAA,EACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAA,OAAA,EACxC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EAG9B,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,2BAI1B,KAAK,CAAC,KAAK,CAAC,EAAE,oEAOf,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,oBAAA;MAKtC,cAAc,GAAG,MAAM,CAAC,GAAG;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties
|
|
1
|
+
import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties } from 'react';
|
|
2
2
|
import { WithTokensProps } from '../../hoc/withTokens/withTokens';
|
|
3
3
|
export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
|
|
4
4
|
/**
|
|
@@ -18,12 +18,4 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensPr
|
|
|
18
18
|
loading?: boolean;
|
|
19
19
|
/** Additional styles for mainContent */
|
|
20
20
|
contentStyles?: CSSProperties;
|
|
21
|
-
/** Render as a different element type (e.g. 'a' for links) */
|
|
22
|
-
as?: ElementType;
|
|
23
|
-
/** URL when rendered as an anchor (use with as="a") */
|
|
24
|
-
href?: string;
|
|
25
|
-
/** Link target (use with as="a") */
|
|
26
|
-
target?: string;
|
|
27
|
-
/** Link rel attribute (use with as="a") */
|
|
28
|
-
rel?: string;
|
|
29
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25
|
|
1
|
+
{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25
|
|
1
|
+
{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
|
|
@@ -1,34 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
+
var withTokens = require('../../hoc/withTokens/withTokens.cjs');
|
|
5
|
+
var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
|
|
4
6
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
5
7
|
require('uid/secure');
|
|
6
|
-
var
|
|
7
|
-
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
8
|
+
var Action = require('../Action/Action.cjs');
|
|
8
9
|
var FlexCol = require('../Flex/FlexCol/FlexCol.cjs');
|
|
10
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
9
11
|
var Text = require('../Text/Text.cjs');
|
|
10
|
-
var Button = require('../Button/Button.cjs');
|
|
11
|
-
var CrossIcon = require('../../icons/design-system/components/CrossIcon.cjs');
|
|
12
12
|
var FeatureBanner_module = require('./FeatureBanner.module.scss.cjs');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
15
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
17
|
|
|
18
|
-
const FeatureBannerBase = ({ variant = 'primary', size = '
|
|
19
|
-
return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: "flex-start",
|
|
18
|
+
const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
|
|
19
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames.buildClassnames([
|
|
20
20
|
FeatureBanner_module.featureBanner,
|
|
21
21
|
FeatureBanner_module[`${size}-size`],
|
|
22
22
|
FeatureBanner_module[`${variant}-variant`],
|
|
23
|
+
FeatureBanner_module[`${direction}-layout`],
|
|
23
24
|
className,
|
|
24
25
|
]), role: "region", "aria-label": title, ...divProps },
|
|
25
26
|
iconSlot && React__default.default.createElement("div", { className: FeatureBanner_module.iconBackground }, iconSlot),
|
|
26
|
-
React__default.default.createElement(FlexCol.FlexCol, { gap:
|
|
27
|
+
React__default.default.createElement(FlexCol.FlexCol, { gap: size === 'base' ? 'base' : '3', flexGrow: "1", className: FeatureBanner_module[direction] },
|
|
27
28
|
React__default.default.createElement(FlexCol.FlexCol, { gap: "xs" },
|
|
28
29
|
React__default.default.createElement(Text.Text, { variant: "headingSmall" }, title),
|
|
29
|
-
contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap:
|
|
30
|
-
actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(
|
|
31
|
-
onClose && (React__default.default.createElement(
|
|
30
|
+
contentSlot && React__default.default.createElement(FlexCol.FlexCol, { gap: "sm" }, contentSlot)),
|
|
31
|
+
actions && actions.length > 0 && (React__default.default.createElement(FlexRow.FlexRow, { flexWrap: "nowrap", gap: "sm", className: FeatureBanner_module[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.default.createElement(Action.Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
|
|
32
|
+
onClose && (React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", iconSlot: React__default.default.createElement(CrossIcon.ReactComponent, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? FeatureBanner_module.centerButton : undefined }))));
|
|
32
33
|
};
|
|
33
34
|
const FeatureBanner = withTokens.withTokens(FeatureBannerBase, 'default');
|
|
34
35
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"FeatureBanner.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n variant = 'primary',\n size = 'base',\n direction = 'vertical',\n title,\n contentSlot,\n iconSlot,\n actions,\n onClose,\n className,\n ...divProps\n}: FeatureBannerProps) => {\n return (\n <FlexRow\n flexWrap=\"nowrap\"\n alignItems=\"flex-start\"\n gap=\"none\"\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.featureBanner,\n styles[`${size}-size`],\n styles[`${variant}-variant`],\n styles[`${direction}-layout`],\n className,\n ])}\n role=\"region\"\n aria-label={title}\n {...divProps}\n >\n {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n <FlexCol gap={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n <FlexCol gap=\"xs\">\n <Text variant=\"headingSmall\">{title}</Text>\n\n {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n </FlexCol>\n\n {actions && actions.length > 0 && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={direction === 'horizontal' ? styles.centerButton : undefined}\n />\n )}\n </FlexRow>\n );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React","FlexRow","buildClassnames","styles","FlexCol","Text","Action","CrossIcon","withTokens"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,qCAACC,eAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAEC,+BAAe,CAAC;AACzB,YAAAC,oBAAM,CAAC,aAAa;AACpB,YAAAA,oBAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAAA,oBAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AAC5B,YAAAA,oBAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIH,8CAAK,SAAS,EAAEG,oBAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAED,oBAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAH,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAJ,sBAAA,CAAA,aAAA,CAACK,SAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIL,sBAAA,CAAA,aAAA,CAACI,eAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BJ,sBAAA,CAAA,aAAA,CAACC,eAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAEE,oBAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEH,sBAAA,CAAA,aAAA,CAACM,aAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNN,sBAAA,CAAA,aAAA,CAACM,aAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEN,sBAAA,CAAA,aAAA,CAACO,wBAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAGJ,oBAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAGK,qBAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
|
|
@@ -2,10 +2,12 @@ import React from 'react';
|
|
|
2
2
|
export declare const FeatureBanner: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & import("../../hoc/withTokens").WithTokensProps & {
|
|
3
3
|
variant?: import("./types").FeatureBannerVariant | undefined;
|
|
4
4
|
size?: import("./types").FeatureBannerSize | undefined;
|
|
5
|
-
|
|
5
|
+
direction?: import("./types").FeatureBannerDirection | undefined;
|
|
6
6
|
title: string;
|
|
7
7
|
contentSlot?: React.ReactNode;
|
|
8
8
|
iconSlot?: React.ReactNode;
|
|
9
|
-
actions?: import("
|
|
9
|
+
actions?: ((Omit<import("../Action").ActionProps<"button">, "children" | "size"> | Omit<import("../Action").ActionProps<"a">, "children" | "size">) & {
|
|
10
|
+
label: string;
|
|
11
|
+
})[] | undefined;
|
|
10
12
|
onClose?: (() => void) | undefined;
|
|
11
13
|
} & React.RefAttributes<never>>;
|
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
+
import { withTokens } from '../../hoc/withTokens/withTokens.js';
|
|
3
|
+
import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
|
|
2
4
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
3
5
|
import 'uid/secure';
|
|
4
|
-
import {
|
|
5
|
-
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
6
|
+
import { Action } from '../Action/Action.js';
|
|
6
7
|
import { FlexCol } from '../Flex/FlexCol/FlexCol.js';
|
|
8
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
7
9
|
import { Text } from '../Text/Text.js';
|
|
8
|
-
import { Button } from '../Button/Button.js';
|
|
9
|
-
import { ReactComponent as CrossIcon } from '../../icons/design-system/components/CrossIcon.js';
|
|
10
10
|
import styles from './FeatureBanner.module.scss.js';
|
|
11
11
|
|
|
12
|
-
const FeatureBannerBase = ({ variant = 'primary', size = '
|
|
13
|
-
return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: "flex-start",
|
|
12
|
+
const FeatureBannerBase = ({ variant = 'primary', size = 'base', direction = 'vertical', title, contentSlot, iconSlot, actions, onClose, className, ...divProps }) => {
|
|
13
|
+
return (React__default.createElement(FlexRow, { flexWrap: "nowrap", alignItems: "flex-start", gap: "none", justifyContent: "space-between", className: buildClassnames([
|
|
14
14
|
styles.featureBanner,
|
|
15
15
|
styles[`${size}-size`],
|
|
16
16
|
styles[`${variant}-variant`],
|
|
17
|
+
styles[`${direction}-layout`],
|
|
17
18
|
className,
|
|
18
19
|
]), role: "region", "aria-label": title, ...divProps },
|
|
19
20
|
iconSlot && React__default.createElement("div", { className: styles.iconBackground }, iconSlot),
|
|
20
|
-
React__default.createElement(FlexCol, { gap:
|
|
21
|
+
React__default.createElement(FlexCol, { gap: size === 'base' ? 'base' : '3', flexGrow: "1", className: styles[direction] },
|
|
21
22
|
React__default.createElement(FlexCol, { gap: "xs" },
|
|
22
23
|
React__default.createElement(Text, { variant: "headingSmall" }, title),
|
|
23
|
-
contentSlot && React__default.createElement(FlexCol, { gap:
|
|
24
|
-
actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm" }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(
|
|
25
|
-
onClose && (React__default.createElement(
|
|
24
|
+
contentSlot && React__default.createElement(FlexCol, { gap: "sm" }, contentSlot)),
|
|
25
|
+
actions && actions.length > 0 && (React__default.createElement(FlexRow, { flexWrap: "nowrap", gap: "sm", className: styles[`actions-${direction}`] }, actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (React__default.createElement(Action, { key: label, size: "sm", variant: actionVariant, ...actionProps }, label)))))),
|
|
26
|
+
onClose && (React__default.createElement(Action, { variant: "flat", size: "sm", iconSlot: React__default.createElement(CrossIcon, null), onClick: onClose, "aria-label": "Close banner", className: direction === 'horizontal' ? styles.centerButton : undefined }))));
|
|
26
27
|
};
|
|
27
28
|
const FeatureBanner = withTokens(FeatureBannerBase, 'default');
|
|
28
29
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"FeatureBanner.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.tsx"],"sourcesContent":["import React from 'react';\n\nimport { withTokens } from '../../hoc/withTokens';\nimport { CrossIcon } from '../../icons';\nimport { buildClassnames } from '../../utils';\nimport { Action } from '../Action';\nimport { FlexCol } from '../Flex/FlexCol';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Text } from '../Text';\nimport { FeatureBannerProps } from './types';\n\nimport styles from './FeatureBanner.module.scss';\n\nconst FeatureBannerBase = ({\n variant = 'primary',\n size = 'base',\n direction = 'vertical',\n title,\n contentSlot,\n iconSlot,\n actions,\n onClose,\n className,\n ...divProps\n}: FeatureBannerProps) => {\n return (\n <FlexRow\n flexWrap=\"nowrap\"\n alignItems=\"flex-start\"\n gap=\"none\"\n justifyContent=\"space-between\"\n className={buildClassnames([\n styles.featureBanner,\n styles[`${size}-size`],\n styles[`${variant}-variant`],\n styles[`${direction}-layout`],\n className,\n ])}\n role=\"region\"\n aria-label={title}\n {...divProps}\n >\n {iconSlot && <div className={styles.iconBackground}>{iconSlot}</div>}\n\n <FlexCol gap={size === 'base' ? 'base' : '3'} flexGrow=\"1\" className={styles[direction]}>\n <FlexCol gap=\"xs\">\n <Text variant=\"headingSmall\">{title}</Text>\n\n {contentSlot && <FlexCol gap=\"sm\">{contentSlot}</FlexCol>}\n </FlexCol>\n\n {actions && actions.length > 0 && (\n <FlexRow flexWrap=\"nowrap\" gap=\"sm\" className={styles[`actions-${direction}`]}>\n {actions.map(({ label, variant: actionVariant = 'default', ...actionProps }) => (\n <Action key={label} size=\"sm\" variant={actionVariant} {...actionProps}>\n {label}\n </Action>\n ))}\n </FlexRow>\n )}\n </FlexCol>\n\n {onClose && (\n <Action\n variant=\"flat\"\n size=\"sm\"\n iconSlot={<CrossIcon />}\n onClick={onClose}\n aria-label=\"Close banner\"\n className={direction === 'horizontal' ? styles.centerButton : undefined}\n />\n )}\n </FlexRow>\n );\n};\n\nexport const FeatureBanner = withTokens(FeatureBannerBase, 'default');\n"],"names":["React"],"mappings":";;;;;;;;;;;AAaA,MAAM,iBAAiB,GAAG,CAAC,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,UAAU,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,QAAQ,EACQ,KAAI;IACvB,QACEA,6BAAC,OAAO,EAAA,EACN,QAAQ,EAAC,QAAQ,EACjB,UAAU,EAAC,YAAY,EACvB,GAAG,EAAC,MAAM,EACV,cAAc,EAAC,eAAe,EAC9B,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,aAAa;AACpB,YAAA,MAAM,CAAC,CAAA,EAAG,IAAI,CAAA,KAAA,CAAO,CAAC;AACtB,YAAA,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,QAAA,CAAU,CAAC;AAC5B,YAAA,MAAM,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,CAAC;YAC7B,SAAS;AACV,SAAA,CAAC,EACF,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,KAAK,KACb,QAAQ,EAAA;QAEX,QAAQ,IAAIA,sCAAK,SAAS,EAAE,MAAM,CAAC,cAAc,EAAA,EAAG,QAAQ,CAAO;QAEpEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA;AACrF,YAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA;AACf,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,cAAc,EAAA,EAAE,KAAK,CAAQ;gBAE1C,WAAW,IAAIA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,GAAG,EAAC,IAAI,EAAA,EAAE,WAAW,CAAW,CACjD;AAET,YAAA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,KAC5BA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,MAAM,CAAC,WAAW,SAAS,CAAA,CAAE,CAAC,EAAA,EAC1E,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,GAAG,SAAS,EAAE,GAAG,WAAW,EAAE,MACzEA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,EAAA,GAAM,WAAW,EAAA,EAClE,KAAK,CACC,CACV,CAAC,CACM,CACX,CACO;QAET,OAAO,KACNA,cAAA,CAAA,aAAA,CAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,IAAA,CAAG,EACvB,OAAO,EAAE,OAAO,gBACL,cAAc,EACzB,SAAS,EAAE,SAAS,KAAK,YAAY,GAAG,MAAM,CAAC,YAAY,GAAG,SAAS,GACvE,CACH,CACO;AAEd,CAAC;AAEM,MAAM,aAAa,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle("
|
|
6
|
-
var styles = {"
|
|
5
|
+
___$insertStyle("._base-size_i33v4_1 {\n --banner-padding: var(--sizes-base);\n --banner-gap: var(--sizes-base);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-base);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n --banner-padding: var(--sizes-3);\n --banner-gap: var(--sizes-3);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-3);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n --banner-padding: var(--sizes-sm);\n --banner-gap: var(--sizes-2);\n --horizontal-gap: var(--sizes-2);\n --horizontal-padding-left: var(--sizes-none);\n --horizontal-action-padding: var(--sizes-none);\n --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_28 {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_i33v4_34 {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n flex-direction: column;\n align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: var(--sizes-xs);\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n align-self: center;\n}");
|
|
6
|
+
var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=FeatureBanner.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"FeatureBanner.module.scss.cjs","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n --banner-padding: var(--sizes-base);\n --banner-gap: var(--sizes-base);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-base);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n --banner-padding: var(--sizes-3);\n --banner-gap: var(--sizes-3);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-3);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n --banner-padding: var(--sizes-sm);\n --banner-gap: var(--sizes-2);\n --horizontal-gap: var(--sizes-2);\n --horizontal-padding-left: var(--sizes-none);\n --horizontal-action-padding: var(--sizes-none);\n --icon-size: var(--sizes-3);\n}\n\n.primary-variant {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-primary);\n}\n\n.featureBanner {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n\n &.vertical-layout {\n gap: var(--banner-gap);\n }\n\n &.horizontal-layout {\n gap: var(--horizontal-gap);\n }\n}\n\n.featureBanner .vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: var(--sizes-xs);\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n\n & svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n }\n}\n\n.centerButton {\n align-self: center;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle("
|
|
4
|
-
var styles = {"
|
|
3
|
+
insertStyle("._base-size_i33v4_1 {\n --banner-padding: var(--sizes-base);\n --banner-gap: var(--sizes-base);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-base);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-base);\n}\n\n._sm-size_i33v4_10 {\n --banner-padding: var(--sizes-3);\n --banner-gap: var(--sizes-3);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-3);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-3);\n}\n\n._xs-size_i33v4_19 {\n --banner-padding: var(--sizes-sm);\n --banner-gap: var(--sizes-2);\n --horizontal-gap: var(--sizes-2);\n --horizontal-padding-left: var(--sizes-none);\n --horizontal-action-padding: var(--sizes-none);\n --icon-size: var(--sizes-3);\n}\n\n._primary-variant_i33v4_28 {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n._secondary-variant_i33v4_34 {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-primary);\n}\n\n._featureBanner_i33v4_40 {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n}\n._featureBanner_i33v4_40._vertical-layout_i33v4_46 {\n gap: var(--banner-gap);\n}\n._featureBanner_i33v4_40._horizontal-layout_i33v4_49 {\n gap: var(--horizontal-gap);\n}\n\n._featureBanner_i33v4_40 ._vertical_i33v4_46 {\n flex-direction: column;\n align-items: flex-start;\n}\n\n._featureBanner_i33v4_40 ._horizontal_i33v4_49 {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-left: var(--horizontal-padding-left);\n}\n\n._actions-vertical_i33v4_65 {\n padding: var(--sizes-none);\n}\n\n._actions-horizontal_i33v4_69 {\n padding: var(--horizontal-action-padding);\n}\n\n._iconBackground_i33v4_73 {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: var(--sizes-xs);\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n}\n._iconBackground_i33v4_73 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n}\n\n._centerButton_i33v4_88 {\n align-self: center;\n}");
|
|
4
|
+
var styles = {"base-size":"_base-size_i33v4_1","sm-size":"_sm-size_i33v4_10","xs-size":"_xs-size_i33v4_19","primary-variant":"_primary-variant_i33v4_28","secondary-variant":"_secondary-variant_i33v4_34","featureBanner":"_featureBanner_i33v4_40","vertical-layout":"_vertical-layout_i33v4_46","horizontal-layout":"_horizontal-layout_i33v4_49","vertical":"_vertical_i33v4_46","horizontal":"_horizontal_i33v4_49","actions-vertical":"_actions-vertical_i33v4_65","actions-horizontal":"_actions-horizontal_i33v4_69","iconBackground":"_iconBackground_i33v4_73","centerButton":"_centerButton_i33v4_88"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=FeatureBanner.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"FeatureBanner.module.scss.js","sources":["../../../src/components/FeatureBanner/FeatureBanner.module.scss"],"sourcesContent":[".base-size {\n --banner-padding: var(--sizes-base);\n --banner-gap: var(--sizes-base);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-base);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-base);\n}\n\n.sm-size {\n --banner-padding: var(--sizes-3);\n --banner-gap: var(--sizes-3);\n --horizontal-gap: var(--sizes-none);\n --horizontal-padding-left: var(--sizes-3);\n --horizontal-action-padding: var(--sizes-sm);\n --icon-size: var(--sizes-3);\n}\n\n.xs-size {\n --banner-padding: var(--sizes-sm);\n --banner-gap: var(--sizes-2);\n --horizontal-gap: var(--sizes-2);\n --horizontal-padding-left: var(--sizes-none);\n --horizontal-action-padding: var(--sizes-none);\n --icon-size: var(--sizes-3);\n}\n\n.primary-variant {\n --feature-banner-bg: var(--theme-surface);\n --icon-bg-color: var(--theme-primary);\n --icon-color: var(--theme-on-primary);\n}\n\n.secondary-variant {\n --feature-banner-bg: var(--theme-surface-secondary);\n --icon-bg-color: var(--theme-surface);\n --icon-color: var(--theme-primary);\n}\n\n.featureBanner {\n border: var(--sizes-line) solid var(--theme-surface-alt);\n border-radius: var(--radius-base);\n background-color: var(--feature-banner-bg);\n padding: var(--banner-padding);\n\n &.vertical-layout {\n gap: var(--banner-gap);\n }\n\n &.horizontal-layout {\n gap: var(--horizontal-gap);\n }\n}\n\n.featureBanner .vertical {\n flex-direction: column;\n align-items: flex-start;\n}\n\n.featureBanner .horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding-left: var(--horizontal-padding-left);\n}\n\n.actions-vertical {\n padding: var(--sizes-none);\n}\n\n.actions-horizontal {\n padding: var(--horizontal-action-padding);\n}\n\n.iconBackground {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: var(--sizes-xs);\n border-radius: var(--radius-base);\n background-color: var(--icon-bg-color);\n\n & svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--icon-color);\n }\n}\n\n.centerButton {\n align-self: center;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,q1EAAA;AACA,aAAA,CAAA,WAAA,CAAA,oBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,SAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,iBAAA,CAAA,2BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,UAAA,CAAA,oBAAA,CAAA,YAAA,CAAA,sBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,oBAAA,CAAA,8BAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,cAAA,CAAA,wBAAA;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { FeatureBanner } from './FeatureBanner';
|
|
2
|
-
export type {
|
|
2
|
+
export type { FeatureBannerDirection, FeatureBannerProps, FeatureBannerSize, FeatureBannerVariant, } from './types';
|
|
@@ -1,27 +1,29 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { WithTokensProps } from '../../hoc/withTokens/withTokens';
|
|
3
|
-
import {
|
|
3
|
+
import type { ActionProps } from '../Action/types';
|
|
4
4
|
/** Visual style of the banner */
|
|
5
5
|
export type FeatureBannerVariant = 'primary' | 'secondary';
|
|
6
6
|
/** Controls the padding density of the banner */
|
|
7
|
-
export type FeatureBannerSize = '
|
|
7
|
+
export type FeatureBannerSize = 'base' | 'sm' | 'xs';
|
|
8
8
|
/** Direction of the banner content flow */
|
|
9
|
-
export type
|
|
10
|
-
export type FeatureBannerProps = Omit<
|
|
9
|
+
export type FeatureBannerDirection = 'vertical' | 'horizontal';
|
|
10
|
+
export type FeatureBannerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & WithTokensProps & {
|
|
11
11
|
/** Visual style of the banner. `'primary'` has a solid icon background, `'secondary'` has a white background */
|
|
12
12
|
variant?: FeatureBannerVariant;
|
|
13
13
|
/** Controls padding density */
|
|
14
14
|
size?: FeatureBannerSize;
|
|
15
15
|
/** Direction of content flow. `'vertical'` stacks content, `'horizontal'` places content side-by-side */
|
|
16
|
-
|
|
16
|
+
direction?: FeatureBannerDirection;
|
|
17
17
|
/** Banner heading text, also used as the `aria-label` for the region */
|
|
18
18
|
title: string;
|
|
19
19
|
/** Flexible content area below the title for message text, links, or any custom content */
|
|
20
20
|
contentSlot?: ReactNode;
|
|
21
21
|
/** Icon displayed in a themed background container */
|
|
22
22
|
iconSlot?: ReactNode;
|
|
23
|
-
/**
|
|
24
|
-
actions?:
|
|
23
|
+
/** Actions rendered below the content. Supports both button and link actions. */
|
|
24
|
+
actions?: ((Omit<ActionProps<'button'>, 'children' | 'size'> | Omit<ActionProps<'a'>, 'children' | 'size'>) & {
|
|
25
|
+
label: string;
|
|
26
|
+
})[];
|
|
25
27
|
/** Close handler. When provided, renders a close button */
|
|
26
28
|
onClose?: () => void;
|
|
27
29
|
};
|
|
@@ -14,10 +14,6 @@ export declare const PaginationButton: import("styled-components").StyledCompone
|
|
|
14
14
|
dropdown?: boolean | undefined;
|
|
15
15
|
loading?: boolean | undefined;
|
|
16
16
|
contentStyles?: import("react").CSSProperties | undefined;
|
|
17
|
-
as?: import("react").ElementType | undefined;
|
|
18
|
-
href?: string | undefined;
|
|
19
|
-
target?: string | undefined;
|
|
20
|
-
rel?: string | undefined;
|
|
21
17
|
} & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
|
|
22
18
|
export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
|
|
23
19
|
rel?: string | undefined;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var
|
|
4
|
+
var ScreenReaderOnly_module = require('./ScreenReaderOnly.module.scss.cjs');
|
|
5
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
6
|
+
require('uid/secure');
|
|
5
7
|
|
|
6
8
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
9
|
|
|
8
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
9
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
10
11
|
|
|
11
|
-
const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
|
|
12
12
|
/**
|
|
13
13
|
* The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
|
|
14
14
|
* * **This is not a replacement for `aria-label`.**
|
|
@@ -20,11 +20,10 @@ const ScreenReaderOnlyElement = styled__default.default.span.withConfig({ displa
|
|
|
20
20
|
* **Example use cases:**
|
|
21
21
|
* - Adding instructional cues and indicators
|
|
22
22
|
* - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
|
|
23
|
-
* - Skip to links to take the user to the main content (still need to be visibile when focused)
|
|
24
23
|
* - Breadcrumb navigation, making it clear with a "you are here" screen reader text
|
|
25
24
|
*/
|
|
26
|
-
const ScreenReaderOnly = ({ children }) => {
|
|
27
|
-
return React__default.default.createElement(
|
|
25
|
+
const ScreenReaderOnly = ({ children, className, as: Component = 'span', ...rest }) => {
|
|
26
|
+
return (React__default.default.createElement(Component, { className: buildClassnames.buildClassnames([ScreenReaderOnly_module.screenReaderOnly, className]), ...rest }, children));
|
|
28
27
|
};
|
|
29
28
|
|
|
30
29
|
exports.ScreenReaderOnly = ScreenReaderOnly;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport styles from './ScreenReaderOnly.module.scss';\nimport { buildClassnames } from '../../utils';\n\ntype ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {\n children: ReactNode;\n as?: ElementType;\n};\n\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n * * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({\n children,\n className,\n as: Component = 'span',\n ...rest\n}: ScreenReaderOnlyProps) => {\n return (\n <Component className={buildClassnames([styles.screenReaderOnly, className])} {...rest}>\n {children}\n </Component>\n );\n};\n"],"names":["React","buildClassnames","styles"],"mappings":";;;;;;;;;;;AASA;;;;;;;;;;;;AAYG;MACU,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,GAAG,IAAI,EACe,KAAI;IAC1B,QACEA,qCAAC,SAAS,EAAA,EAAC,SAAS,EAAEC,+BAAe,CAAC,CAACC,uBAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,EAClF,QAAQ,CACC;AAEhB;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
type ScreenReaderOnlyProps = {
|
|
1
|
+
import React, { ElementType, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
type ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {
|
|
3
3
|
children: ReactNode;
|
|
4
|
+
as?: ElementType;
|
|
4
5
|
};
|
|
5
6
|
/**
|
|
6
7
|
* The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
|
|
@@ -13,8 +14,7 @@ type ScreenReaderOnlyProps = {
|
|
|
13
14
|
* **Example use cases:**
|
|
14
15
|
* - Adding instructional cues and indicators
|
|
15
16
|
* - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
|
|
16
|
-
* - Skip to links to take the user to the main content (still need to be visibile when focused)
|
|
17
17
|
* - Breadcrumb navigation, making it clear with a "you are here" screen reader text
|
|
18
18
|
*/
|
|
19
|
-
export declare const ScreenReaderOnly: ({ children }: ScreenReaderOnlyProps) => React.JSX.Element;
|
|
19
|
+
export declare const ScreenReaderOnly: ({ children, className, as: Component, ...rest }: ScreenReaderOnlyProps) => React.JSX.Element;
|
|
20
20
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import
|
|
2
|
+
import styles from './ScreenReaderOnly.module.scss.js';
|
|
3
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
4
|
+
import 'uid/secure';
|
|
3
5
|
|
|
4
|
-
const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--ScreenReaderOnlyElement", componentId: "vui--ejkp56" }) `position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;`;
|
|
5
6
|
/**
|
|
6
7
|
* The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.
|
|
7
8
|
* * **This is not a replacement for `aria-label`.**
|
|
@@ -13,11 +14,10 @@ const ScreenReaderOnlyElement = styled.span.withConfig({ displayName: "vui--Scre
|
|
|
13
14
|
* **Example use cases:**
|
|
14
15
|
* - Adding instructional cues and indicators
|
|
15
16
|
* - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with "Search orders"
|
|
16
|
-
* - Skip to links to take the user to the main content (still need to be visibile when focused)
|
|
17
17
|
* - Breadcrumb navigation, making it clear with a "you are here" screen reader text
|
|
18
18
|
*/
|
|
19
|
-
const ScreenReaderOnly = ({ children }) => {
|
|
20
|
-
return React__default.createElement(
|
|
19
|
+
const ScreenReaderOnly = ({ children, className, as: Component = 'span', ...rest }) => {
|
|
20
|
+
return (React__default.createElement(Component, { className: buildClassnames([styles.screenReaderOnly, className]), ...rest }, children));
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { ScreenReaderOnly };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.tsx"],"sourcesContent":["import React, { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport styles from './ScreenReaderOnly.module.scss';\nimport { buildClassnames } from '../../utils';\n\ntype ScreenReaderOnlyProps = HTMLAttributes<HTMLElement> & {\n children: ReactNode;\n as?: ElementType;\n};\n\n/**\n * The `ScreenReaderOnly` component is used to render content that is only visible to screen readers and assistive technologies. This component can be useful for providing additional context or information to users who rely on screen readers, while keeping the content visually hidden from sighted users.\n * * **This is not a replacement for `aria-label`.**\n *\n * Note: aria-label is intended for interactive elements or for elements made interactive via other ARIA declarations when there's no visible text in the DOM to serve as a label.\n *\n * In general, screen reader-only content should be reserved for information that is apparent visually but not apparent to blind screen reader users.\n *\n * **Example use cases:**\n * - Adding instructional cues and indicators\n * - Search input that is clearly a search bar to sighted users (search icon, etc.). A hidden, associated `<label>` element with \"Search orders\"\n * - Breadcrumb navigation, making it clear with a \"you are here\" screen reader text\n */\nexport const ScreenReaderOnly = ({\n children,\n className,\n as: Component = 'span',\n ...rest\n}: ScreenReaderOnlyProps) => {\n return (\n <Component className={buildClassnames([styles.screenReaderOnly, className])} {...rest}>\n {children}\n </Component>\n );\n};\n"],"names":["React"],"mappings":";;;;;AASA;;;;;;;;;;;;AAYG;MACU,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,GAAG,IAAI,EACe,KAAI;IAC1B,QACEA,6BAAC,SAAS,EAAA,EAAC,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,EAAA,GAAM,IAAI,EAAA,EAClF,QAAQ,CACC;AAEhB;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._screenReaderOnly_pq7po_1 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}");
|
|
6
|
+
var styles = {"screenReaderOnly":"_screenReaderOnly_pq7po_1"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=ScreenReaderOnly.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.module.scss.cjs","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.module.scss"],"sourcesContent":[".screenReaderOnly {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6MAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._screenReaderOnly_pq7po_1 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}");
|
|
4
|
+
var styles = {"screenReaderOnly":"_screenReaderOnly_pq7po_1"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=ScreenReaderOnly.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenReaderOnly.module.scss.js","sources":["../../../src/components/ScreenReaderOnly/ScreenReaderOnly.module.scss"],"sourcesContent":[".screenReaderOnly {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6MAAA;AACA,aAAA,CAAA,kBAAA,CAAA,2BAAA;;;;"}
|