@mirohq/design-system-badge 0.3.1-test-changelog.0 → 0.3.1
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/main.js +1 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -0
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +3 -0
- package/package.json +4 -4
package/dist/main.js
CHANGED
|
@@ -60,6 +60,7 @@ const StyledDot = designSystemStitches.styled(designSystemPrimitive.Primitive.di
|
|
|
60
60
|
...sharedStyles
|
|
61
61
|
});
|
|
62
62
|
const StyledBadgeWrapper = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
63
|
+
userSelect: "none",
|
|
63
64
|
alignItems: "center",
|
|
64
65
|
boxSizing: "border-box",
|
|
65
66
|
display: "flex",
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":["styled","Primitive","React"],"mappings":";;;;;;;;;;;;AAKa,MAAA,oBAAA,GAAuBA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACxD,QAAU,EAAA,UAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAoB,GAAA;AAAA,EACxB,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,+BAAA;AAAA,EACjB,WAAa,EAAA,0BAAA;AAAA,EACb,YAAc,EAAA,OAAA;AAAA,EACd,KAAO,EAAA,wBAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,QAAU,EAAA,UAAA;AAAA,EACV,aAAe,EAAA,MAAA;AAAA,EACf,MAAQ,EAAA,CAAA;AAAA,EACR,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,sBAAA;AAAA,QACjB,WAAa,EAAA,iBAAA;AAAA,QACb,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AACF,CAAA,CAAA;AAEa,MAAA,WAAA,GAAcD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC/C,WAAa,EAAA,CAAA;AAAA,EACb,WAAa,EAAA,OAAA;AAAA,EACb,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,sBAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,MAAQ,EAAA,MAAA;AAAA,EACR,IAAM,EAAA,KAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,SAAW,EAAA,kBAAA;AAAA,EACX,GAAG,YAAA;AACL,CAAC,CAAA,CAAA;AAEY,MAAA,SAAA,GAAYD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,WAAa,EAAA,CAAA;AAAA,EACb,MAAQ,EAAA,KAAA;AAAA,EACR,MAAQ,EAAA,KAAA;AAAA,EACR,QAAU,EAAA,CAAA;AAAA,EACV,OAAS,EAAA,CAAA;AAAA,EACT,KAAO,EAAA,KAAA;AAAA,EACP,KAAO,EAAA,KAAA;AAAA,EACP,GAAG,YAAA;AACL,CAAC,CAAA,CAAA;AAEY,MAAA,kBAAA,GAAqBD,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EACtD,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AAAA,EACR,YAAc,EAAA,QAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,GAAK,EAAA,MAAA;AAAA,EACL,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,GAAA;AACV,CAAC,CAAA;;
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":["styled","Primitive","React"],"mappings":"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"}
|
package/dist/module.js
CHANGED
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":[],"mappings":";;;;AAKa,MAAA,oBAAA,GAAuB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACxD,QAAU,EAAA,UAAA;AACZ,CAAC,CAAA,CAAA;AAED,MAAM,YAAoB,GAAA;AAAA,EACxB,UAAY,EAAA,QAAA;AAAA,EACZ,eAAiB,EAAA,+BAAA;AAAA,EACjB,WAAa,EAAA,0BAAA;AAAA,EACb,YAAc,EAAA,OAAA;AAAA,EACd,KAAO,EAAA,wBAAA;AAAA,EACP,OAAS,EAAA,MAAA;AAAA,EACT,cAAgB,EAAA,QAAA;AAAA,EAChB,QAAU,EAAA,UAAA;AAAA,EACV,aAAe,EAAA,MAAA;AAAA,EACf,MAAQ,EAAA,CAAA;AAAA,EACR,QAAU,EAAA;AAAA,IACR,QAAU,EAAA;AAAA,MACR,IAAM,EAAA;AAAA,QACJ,eAAiB,EAAA,sBAAA;AAAA,QACjB,WAAa,EAAA,iBAAA;AAAA,QACb,KAAO,EAAA,eAAA;AAAA,OACT;AAAA,KACF;AAAA,GACF;AACF,CAAA,CAAA;AAEa,MAAA,WAAA,GAAc,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC/C,WAAa,EAAA,CAAA;AAAA,EACb,WAAa,EAAA,OAAA;AAAA,EACb,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA,sBAAA;AAAA,EACZ,QAAU,EAAA,MAAA;AAAA,EACV,UAAY,EAAA,GAAA;AAAA,EACZ,MAAQ,EAAA,MAAA;AAAA,EACR,IAAM,EAAA,KAAA;AAAA,EACN,QAAU,EAAA,MAAA;AAAA,EACV,OAAS,EAAA,SAAA;AAAA,EACT,GAAK,EAAA,KAAA;AAAA,EACL,SAAW,EAAA,kBAAA;AAAA,EACX,GAAG,YAAA;AACL,CAAC,CAAA,CAAA;AAEY,MAAA,SAAA,GAAY,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC7C,WAAa,EAAA,CAAA;AAAA,EACb,MAAQ,EAAA,KAAA;AAAA,EACR,MAAQ,EAAA,KAAA;AAAA,EACR,QAAU,EAAA,CAAA;AAAA,EACV,OAAS,EAAA,CAAA;AAAA,EACT,KAAO,EAAA,KAAA;AAAA,EACP,KAAO,EAAA,KAAA;AAAA,EACP,GAAG,YAAA;AACL,CAAC,CAAA,CAAA;AAEY,MAAA,kBAAA,GAAqB,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EACtD,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA,UAAA;AAAA,EACV,MAAQ,EAAA,MAAA;AAAA,EACR,YAAc,EAAA,QAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,KAAO,EAAA,MAAA;AAAA,EACP,GAAK,EAAA,MAAA;AAAA,EACL,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,GAAA;AACV,CAAC,CAAA;;
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/badge.styled.tsx","../src/badge.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\n\nexport const StyledBadgeContainer = styled(Primitive.div, {\n position: 'relative',\n})\n\nconst sharedStyles: CSS = {\n alignItems: 'center',\n backgroundColor: '$background-primary-prominent',\n borderColor: '$border-primary-inverted',\n borderRadius: '$half',\n color: '$icon-primary-inverted',\n display: 'flex',\n justifyContent: 'center',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n variants: {\n inverted: {\n true: {\n backgroundColor: '$background-neutrals',\n borderColor: '$border-primary',\n color: '$text-primary',\n },\n },\n },\n}\n\nexport const StyledBadge = styled(Primitive.div, {\n borderWidth: 2,\n borderStyle: 'solid',\n boxSizing: 'border-box',\n fontFamily: 'Formular, sans-serif',\n fontSize: '$150',\n fontWeight: 650,\n height: '20px',\n left: '50%',\n minWidth: '20px',\n padding: '2px $50',\n top: '1px',\n transform: 'translateX(-50%)',\n ...sharedStyles,\n})\n\nexport const StyledDot = styled(Primitive.div, {\n borderWidth: 1,\n bottom: '1px',\n height: '4px',\n minWidth: 0,\n padding: 0,\n right: '1px',\n width: '4px',\n ...sharedStyles,\n})\n\nexport const StyledBadgeWrapper = styled(Primitive.div, {\n userSelect: 'none',\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexFlow: 'row wrap',\n height: '10px',\n placeContent: 'center',\n position: 'absolute',\n right: '-2px',\n top: '-6px',\n width: '10px',\n zIndex: '1',\n})\n\nexport type StyledBadgeProps = ComponentPropsWithRef<typeof StyledBadge>\n","import React from 'react'\nimport type {\n ElementRef,\n ReactNode,\n ReactElement,\n ForwardRefExoticComponent,\n HTMLAttributes,\n} from 'react'\nimport type { Numeric } from '@mirohq/design-system-types'\n\nimport {\n StyledBadgeContainer,\n StyledBadgeWrapper,\n StyledBadge,\n StyledDot,\n} from './badge.styled'\nimport type { StyledBadgeProps } from './badge.styled'\n\nexport interface BadgeProps extends StyledBadgeProps {\n /**\n * Content of the badge\n */\n content?: string\n\n /**\n * Handle whether the badge should be shown, if no content is provided a dot is displayed.\n */\n show?: boolean\n\n /**\n * Element that shows the badge\n */\n children?: ReactNode\n\n /**\n * By default the badge is filled with blue, inverted set it to white.\n */\n inverted?: boolean\n\n /**\n * Move the badge position to the left/right\n */\n offsetX?: Numeric\n\n /**\n * Move the badge position to the top/bottom\n */\n offsetY?: Numeric\n}\n\nexport const Badge: ForwardRefExoticComponent<\n BadgeProps & HTMLAttributes<ElementRef<typeof StyledBadge>>\n> = React.forwardRef(\n (\n { show = true, content, children, offsetX = 0, offsetY = 0, ...restProps },\n forwardRef\n ) => {\n if (!show) {\n return children as ReactElement\n }\n\n let offset = {}\n\n if (+offsetX !== 0 || +offsetY !== 0) {\n offset = {\n UNSAFE_style: {\n transform: `translate(${offsetX}px, ${offsetY}px)`,\n },\n }\n }\n\n const badgeProps = {\n ...restProps,\n ...offset,\n }\n\n return (\n <StyledBadgeContainer\n data-testid={process.env.NODE_ENV === 'test' ? 'badge' : undefined}\n >\n <StyledBadgeWrapper>\n {content !== undefined ? (\n <StyledBadge {...badgeProps} ref={forwardRef}>\n {content}\n </StyledBadge>\n ) : (\n <StyledDot {...badgeProps} ref={forwardRef} />\n )}\n </StyledBadgeWrapper>\n {children}\n </StyledBadgeContainer>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -99,6 +99,8 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Pick<Omit<{}, never>
|
|
|
99
99
|
readonly 'background-danger'?: any;
|
|
100
100
|
readonly 'background-danger-hover'?: any;
|
|
101
101
|
readonly 'background-success'?: any;
|
|
102
|
+
readonly 'background-warning-subtle'?: any;
|
|
103
|
+
readonly 'background-warning-prominent'?: any;
|
|
102
104
|
readonly 'text-neutrals-inverted'?: any;
|
|
103
105
|
readonly 'text-neutrals'?: any;
|
|
104
106
|
readonly 'text-neutrals-subtle'?: any;
|
|
@@ -179,6 +181,7 @@ declare const StyledBadge: react.ForwardRefExoticComponent<Pick<Omit<{}, never>
|
|
|
179
181
|
readonly 50: "0 4px 16px #05003812";
|
|
180
182
|
readonly 100: "0 8px 32px #05003808";
|
|
181
183
|
readonly 'focus-small': "0 0 0 2px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
184
|
+
readonly 'focus-small-outline': "0 0 0 2px $colors$blue-200, inset 0 0 0 1px $colors$blue-500, inset 0 0 0 2px $colors$white";
|
|
182
185
|
readonly 'focus-large': "0 0 0 4px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
183
186
|
readonly 'focus-controls': "0 0 0 1px $colors$white, 0 0 0 3px $colors$blue-500, 0 0 0 5px $colors$blue-200";
|
|
184
187
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-badge",
|
|
3
|
-
"version": "0.3.1
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.0",
|
|
30
|
-
"@mirohq/design-system-
|
|
31
|
-
"@mirohq/design-system-
|
|
30
|
+
"@mirohq/design-system-types": "^0.3.0",
|
|
31
|
+
"@mirohq/design-system-stitches": "^2.1.2"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@mirohq/design-system-button": "^
|
|
34
|
+
"@mirohq/design-system-button": "^3.0.0"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"build": "rollup -c ../../../rollup.config.js",
|