@apify/ui-library 1.135.0 → 1.136.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/src/components/card_container.d.ts +11 -1
- package/dist/src/components/card_container.d.ts.map +1 -1
- package/dist/src/components/card_container.js +13 -5
- package/dist/src/components/card_container.js.map +1 -1
- package/dist/src/components/code/code_block/utils.js +1 -1
- package/dist/src/components/code/code_block/utils.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +5 -5
- package/src/codemods/generate_typograpy_tokens_files.mjs +1 -1
- package/src/components/badge.stories.jsx +1 -1
- package/src/components/card_container.stories.tsx +17 -3
- package/src/components/card_container.tsx +25 -6
- package/src/components/code/code_block/utils.tsx +2 -2
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
2
|
import type { ValueOf } from '@apify-packages/types';
|
|
3
|
+
import type { Size } from '../design_system/tokens/index.js';
|
|
3
4
|
import { type BoxProps } from './box.js';
|
|
4
5
|
export declare const cardContainerClassNames: {
|
|
5
6
|
CONTENT: string;
|
|
@@ -9,6 +10,7 @@ declare const HEADER_PLACEMENT: {
|
|
|
9
10
|
readonly TOP: "TOP";
|
|
10
11
|
readonly BOTTOM: "BOTTOM";
|
|
11
12
|
};
|
|
13
|
+
type ContentPaddingValue = Size | 'none';
|
|
12
14
|
export type CardContainerProps = BoxProps & {
|
|
13
15
|
/** The header can be placed on the bottom of the card or on the top. */
|
|
14
16
|
headerPlacement?: ValueOf<typeof HEADER_PLACEMENT>;
|
|
@@ -18,6 +20,14 @@ export type CardContainerProps = BoxProps & {
|
|
|
18
20
|
* Pass `null` to render without a header section.
|
|
19
21
|
*/
|
|
20
22
|
header: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Controls the padding of the content area. Accepts a space token or `'none'`.
|
|
25
|
+
* When set to `'none'`, padding is removed, the content background becomes transparent
|
|
26
|
+
* (the wrapper's subtle background shows through grid gaps), and overflow is hidden (corners clip to the inner border-radius).
|
|
27
|
+
* Other values (e.g. `'space8'`) change the padding but keep the white background.
|
|
28
|
+
* Defaults to `space16` with white background when not provided.
|
|
29
|
+
*/
|
|
30
|
+
contentPadding?: ContentPaddingValue;
|
|
21
31
|
};
|
|
22
32
|
/**
|
|
23
33
|
* CardContainer visually wraps it's children and shows a simple header.
|
|
@@ -25,7 +35,7 @@ export type CardContainerProps = BoxProps & {
|
|
|
25
35
|
* The header can be customized.
|
|
26
36
|
*/
|
|
27
37
|
export declare const CardContainer: {
|
|
28
|
-
({ children, header, headerPlacement, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
({ children, header, headerPlacement, contentPadding, ...rest }: CardContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
29
39
|
Heading: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
30
40
|
};
|
|
31
41
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card_container.d.ts","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE9C,eAAO,MAAM,uBAAuB;;;CAGnC,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;CAGZ,CAAC;
|
|
1
|
+
{"version":3,"file":"card_container.d.ts","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE9C,eAAO,MAAM,uBAAuB;;;CAGnC,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;CAGZ,CAAC;AAEX,KAAK,mBAAmB,GAAG,IAAI,GAAG,MAAM,CAAC;AAqCzC,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG;IACxC,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACnD;;;;OAIG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa;qEAMvB,kBAAkB;;CAWpB,CAAC"}
|
|
@@ -10,6 +10,13 @@ const HEADER_PLACEMENT = {
|
|
|
10
10
|
TOP: 'TOP',
|
|
11
11
|
BOTTOM: 'BOTTOM',
|
|
12
12
|
};
|
|
13
|
+
const getContentPadding = (contentPadding) => {
|
|
14
|
+
if (contentPadding === 'none')
|
|
15
|
+
return 0;
|
|
16
|
+
if (contentPadding)
|
|
17
|
+
return theme.space[contentPadding];
|
|
18
|
+
return theme.space.space16;
|
|
19
|
+
};
|
|
13
20
|
const Wrapper = styled(Box) `
|
|
14
21
|
background-color: ${theme.color.neutral.backgroundSubtle};
|
|
15
22
|
border-radius: ${theme.radius.radius12};
|
|
@@ -20,11 +27,12 @@ const Wrapper = styled(Box) `
|
|
|
20
27
|
flex-direction: ${({ $headerPlacement }) => ($headerPlacement === HEADER_PLACEMENT.TOP ? 'column' : 'column-reverse')};
|
|
21
28
|
|
|
22
29
|
.${cardContainerClassNames.CONTENT} {
|
|
23
|
-
/*
|
|
24
|
-
border-radius:
|
|
25
|
-
background-color: ${theme.color.neutral.background};
|
|
30
|
+
/* 11px inner radius to match Figma (outer 12px - 1px visual offset) */
|
|
31
|
+
border-radius: 1.1rem;
|
|
32
|
+
background-color: ${({ $contentPadding }) => ($contentPadding === 'none' ? 'transparent' : theme.color.neutral.background)};
|
|
33
|
+
${({ $contentPadding }) => $contentPadding === 'none' && 'overflow: hidden;'}
|
|
26
34
|
|
|
27
|
-
padding: ${
|
|
35
|
+
padding: ${({ $contentPadding }) => getContentPadding($contentPadding)};
|
|
28
36
|
flex-grow: 1;
|
|
29
37
|
}
|
|
30
38
|
|
|
@@ -41,6 +49,6 @@ const CardContainerHeading = styled.span `${theme.typography.shared.desktop.body
|
|
|
41
49
|
*
|
|
42
50
|
* The header can be customized.
|
|
43
51
|
*/
|
|
44
|
-
export const CardContainer = ({ children, header, headerPlacement = HEADER_PLACEMENT.TOP, ...rest }) => (_jsxs(Wrapper, { ...rest, "$headerPlacement": headerPlacement, children: [header != null && (_jsx("div", { className: cardContainerClassNames.HEADER, children: typeof header === 'string' ? _jsx(CardContainerHeading, { children: header }) : header })), _jsx("div", { className: cardContainerClassNames.CONTENT, children: children })] }));
|
|
52
|
+
export const CardContainer = ({ children, header, headerPlacement = HEADER_PLACEMENT.TOP, contentPadding, ...rest }) => (_jsxs(Wrapper, { ...rest, "$headerPlacement": headerPlacement, "$contentPadding": contentPadding, children: [header != null && (_jsx("div", { className: cardContainerClassNames.HEADER, children: typeof header === 'string' ? _jsx(CardContainerHeading, { children: header }) : header })), _jsx("div", { className: cardContainerClassNames.CONTENT, children: children })] }));
|
|
45
53
|
CardContainer.Heading = CardContainerHeading;
|
|
46
54
|
//# sourceMappingURL=card_container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card_container.js","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"card_container.js","sourceRoot":"","sources":["../../../src/components/card_container.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,OAAO,EAAE,GAAG,EAAiB,MAAM,UAAU,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACnC,OAAO,EAAE,uBAAuB;IAChC,MAAM,EAAE,sBAAsB;CACjC,CAAC;AAEF,MAAM,gBAAgB,GAAG;IACrB,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;CACV,CAAC;AAIX,MAAM,iBAAiB,GAAG,CAAC,cAAoC,EAAE,EAAE;IAC/D,IAAI,cAAc,KAAK,MAAM;QAAE,OAAO,CAAC,CAAC;IACxC,IAAI,cAAc;QAAE,OAAO,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACvD,OAAO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAA+F;wBAClG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;qBACvC,KAAK,CAAC,MAAM,CAAC,QAAQ;;eAE3B,KAAK,CAAC,KAAK,CAAC,MAAM;;;sBAGX,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,KAAK,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC;;OAElH,uBAAuB,CAAC,OAAO;;;4BAGV,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;UACxH,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,KAAK,MAAM,IAAI,mBAAmB;;mBAEjE,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,iBAAiB,CAAC,eAAe,CAAC;;;;OAIvE,uBAAuB,CAAC,MAAM;mBAClB,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;CAK1D,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAA,GAAG,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;AAqBzF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,eAAe,GAAG,gBAAgB,CAAC,GAAG,EACtC,cAAc,EACd,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,MAAC,OAAO,OAAK,IAAI,sBAAoB,eAAe,qBAAmB,cAAc,aAChF,MAAM,IAAI,IAAI,IAAI,CACf,cAAK,SAAS,EAAE,uBAAuB,CAAC,MAAM,YACzC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAC,oBAAoB,cAAE,MAAM,GAAwB,CAAC,CAAC,CAAC,MAAM,GAC1F,CACT,EACD,cAAK,SAAS,EAAE,uBAAuB,CAAC,OAAO,YAC1C,QAAQ,GACP,IACA,CACb,CAAC;AAEF,aAAa,CAAC,OAAO,GAAG,oBAAoB,CAAC"}
|
|
@@ -11,7 +11,7 @@ export const getBashLinePrefixes = (code, bashCommandsStart = [], isOneLine) =>
|
|
|
11
11
|
const isEmptyLine = line.startsWith('#') || !line;
|
|
12
12
|
// by default each line that is not empty or comment is a command start
|
|
13
13
|
if (bashCommandsStart.length === 0) {
|
|
14
|
-
return isEmptyLine ? (_jsx(CodeHighlighterLineBashPrefix, { "$isOneLine": isOneLine })) : (_jsx(CodeHighlighterLineBashPrefix, { "$isOneLine": isOneLine, color: theme.color.lavender.base, children: "$" }));
|
|
14
|
+
return isEmptyLine ? (_jsx(CodeHighlighterLineBashPrefix, { "$isOneLine": isOneLine }, `code-highlighter-line-bash-prefix-${i}`)) : (_jsx(CodeHighlighterLineBashPrefix, { "$isOneLine": isOneLine, color: theme.color.lavender.base, children: "$" }, `code-highlighter-line-bash-prefix-${i}`));
|
|
15
15
|
}
|
|
16
16
|
if (bashCommandsStart.includes(i + 1)) {
|
|
17
17
|
return (_jsx(CodeHighlighterLineBashPrefix, { "$isOneLine": isOneLine, color: theme.color.lavender.base, children: "$" }, `code-highlighter-line-bash-prefix-${i}`));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/utils.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEnG,qCAAqC;AACrC,mGAAmG;AACnG,qCAAqC;AACrC,4FAA4F;AAC5F,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,IAAY,EACZ,oBAA8B,EAAE,EAChC,SAAmB,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAE1D,MAAM,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAElD,uEAAuE;QACvE,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,6BAA6B,kBAAa,SAAS,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/utils.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,6BAA6B,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEnG,qCAAqC;AACrC,mGAAmG;AACnG,qCAAqC;AACrC,4FAA4F;AAC5F,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAC/B,IAAY,EACZ,oBAA8B,EAAE,EAChC,SAAmB,EAAE,EAAE;IACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAE1D,MAAM,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAElD,uEAAuE;QACvE,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjC,OAAO,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,6BAA6B,kBAAa,SAAS,IAAO,qCAAqC,CAAC,EAAE,CAAI,CAC1G,CAAC,CAAC,CAAC,CACA,KAAC,6BAA6B,kBAAa,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,mBAAO,qCAAqC,CAAC,EAAE,CAAmC,CAC3K,CAAC;QACN,CAAC;QAED,IAAI,iBAAiB,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YACpC,OAAO,CACH,KAAC,6BAA6B,kBACd,SAAS,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,mBAC3B,qCAAqC,CAAC,EAAE,CACf,CACrC,CAAC;QACN,CAAC;QAED,IAAI,WAAW,EAAE,CAAC;YACd,OAAO,CACH,KAAC,6BAA6B,kBACd,SAAS,IAChB,qCAAqC,CAAC,EAAE,CAC/C,CACL,CAAC;QACN,CAAC;QAED,OAAO,CACH,KAAC,6BAA6B,kBACd,SAAS,EACrB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,mBAC3B,qCAAqC,CAAC,EAAE,CACZ,CACxC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;AACjG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAA6B,EAAE;IAC7E,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;IAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAE5E,OAAO,MAAM,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC;QACnD,MAAM;QACN,KAAC,yBAAyB,cAAiD,MAAM,IAAjD,gCAAgC,MAAM,EAAE,CAAsC;KACjH,CAAC,CAAC,CAAC;AACR,CAAC,CAAC"}
|