@bitrise/bitkit-v2 0.3.297 → 0.3.298
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ListRootProps } from '@chakra-ui/react/list';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
|
-
type BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';
|
|
4
|
+
type BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';
|
|
5
5
|
type BitkitListSize = 'lg' | 'md' | 'sm';
|
|
6
6
|
type BitkitListTextColor = 'body' | 'secondary';
|
|
7
7
|
export interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {
|
|
@@ -50,6 +50,11 @@ var UNORDERED_ICON_SIZE = {
|
|
|
50
50
|
var BitkitListItem = forwardRef((props, ref) => {
|
|
51
51
|
const { children, helperText, icon: Icon, iconColor } = props;
|
|
52
52
|
const { colorVariant, size, textColor, variant } = useBitkitListContext();
|
|
53
|
+
if (variant === "unstyled") return /* @__PURE__ */ jsx(List.Item, {
|
|
54
|
+
ref,
|
|
55
|
+
color: textColor === "secondary" ? "text/secondary" : "text/body",
|
|
56
|
+
children
|
|
57
|
+
});
|
|
53
58
|
if (variant === "inline") return /* @__PURE__ */ jsx(List.Item, {
|
|
54
59
|
ref,
|
|
55
60
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n size?: BitkitListSize;\n textColor?: BitkitListTextColor;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {children}\n </List.Item>\n );\n }\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n height={helperText ? '24' : '20'}\n // Give the smaller 20px circle 2px of block margin on each side so the marker\n // always occupies a 24px vertical slot and its center aligns with the first\n // text line — matches the Figma frame with the 20px circle centered in a 24px\n // marker box.\n marginBlock={helperText ? undefined : '2'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\nexport interface BitkitListProps extends Omit<ListRootProps, 'colorPalette' | 'size'> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n size?: BitkitListSize;\n textColor?: BitkitListTextColor;\n variant?: BitkitListVariant;\n}\n\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {children}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {children}\n </List.Item>\n );\n }\n\n const content = helperText ? (\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" minWidth=\"0\">\n {children}\n <Text color=\"text/secondary\" textStyle=\"body/md/regular\">\n {helperText}\n </Text>\n </Box>\n ) : (\n children\n );\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n return (\n <List.Item\n ref={ref}\n counterIncrement=\"bitkit-list\"\n gap={helperText ? '12' : '6'}\n marginBlockEnd={helperText ? '8' : undefined}\n >\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n height={helperText ? '24' : '20'}\n // Give the smaller 20px circle 2px of block margin on each side so the marker\n // always occupies a 24px vertical slot and its center aligns with the first\n // text line — matches the Figma frame with the 20px circle centered in a 24px\n // marker box.\n marginBlock={helperText ? undefined : '2'}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n width={helperText ? '24' : '20'}\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|