@openedx/paragon 23.0.0-alpha.5 → 23.0.0-alpha.6
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/Card/BaseCard.d.ts +18 -0
- package/dist/Card/BaseCard.js +53 -0
- package/dist/Card/BaseCard.js.map +1 -0
- package/dist/Card/index.js +1 -1
- package/dist/Card/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Card/BaseCard.tsx +92 -0
- package/src/Card/README.md +0 -2
- package/src/Card/index.jsx +1 -1
- package/src/Card/tests/BaseCard.test.jsx +82 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ComponentWithAsProp, BsPropsWithAs } from '../utils/types/bootstrap';
|
|
3
|
+
declare const colorVariants: readonly ["primary", "secondary", "success", "danger", "warning", "info", "dark", "light"];
|
|
4
|
+
declare const textVariants: readonly ["white", "muted"];
|
|
5
|
+
type ColorVariant = typeof colorVariants[number];
|
|
6
|
+
type TextVariant = typeof textVariants[number];
|
|
7
|
+
interface Props extends BsPropsWithAs {
|
|
8
|
+
prefix?: string;
|
|
9
|
+
bgColor?: ColorVariant;
|
|
10
|
+
textColor?: ColorVariant | TextVariant;
|
|
11
|
+
borderColor?: ColorVariant;
|
|
12
|
+
hasBody?: boolean;
|
|
13
|
+
className?: string;
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
type BaseCardType = ComponentWithAsProp<'div', Props>;
|
|
17
|
+
declare const BaseCard: BaseCardType;
|
|
18
|
+
export default BaseCard;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
var _excluded = ["prefix", "className", "bgColor", "textColor", "borderColor", "hasBody", "children", "as"];
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import classNames from 'classnames';
|
|
8
|
+
// @ts-ignore
|
|
9
|
+
import CardBody from './CardBody';
|
|
10
|
+
var BASE_CARD_CLASSNAME = 'card';
|
|
11
|
+
var colorVariants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'];
|
|
12
|
+
var textVariants = ['white', 'muted'];
|
|
13
|
+
var BaseCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
14
|
+
var prefix = _ref.prefix,
|
|
15
|
+
className = _ref.className,
|
|
16
|
+
bgColor = _ref.bgColor,
|
|
17
|
+
textColor = _ref.textColor,
|
|
18
|
+
borderColor = _ref.borderColor,
|
|
19
|
+
_ref$hasBody = _ref.hasBody,
|
|
20
|
+
hasBody = _ref$hasBody === void 0 ? false : _ref$hasBody,
|
|
21
|
+
children = _ref.children,
|
|
22
|
+
_ref$as = _ref.as,
|
|
23
|
+
Component = _ref$as === void 0 ? 'div' : _ref$as,
|
|
24
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
25
|
+
var classes = classNames(className, prefix ? "".concat(prefix, "-").concat(BASE_CARD_CLASSNAME) : BASE_CARD_CLASSNAME, bgColor && "bg-".concat(bgColor), textColor && "text-".concat(textColor), borderColor && "border-".concat(borderColor));
|
|
26
|
+
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
27
|
+
ref: ref
|
|
28
|
+
}, props, {
|
|
29
|
+
className: classes
|
|
30
|
+
}), hasBody ? /*#__PURE__*/React.createElement(CardBody, null, children) : children);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
/* eslint-disable react/require-default-props */
|
|
34
|
+
BaseCard.propTypes = {
|
|
35
|
+
/** Prefix for component CSS classes. */
|
|
36
|
+
prefix: PropTypes.string,
|
|
37
|
+
/** Background color of the card. */
|
|
38
|
+
bgColor: PropTypes.oneOf(colorVariants),
|
|
39
|
+
/** Text color of the card. */
|
|
40
|
+
textColor: PropTypes.oneOf([].concat(colorVariants, textVariants)),
|
|
41
|
+
/** Border color of the card. */
|
|
42
|
+
borderColor: PropTypes.oneOf(colorVariants),
|
|
43
|
+
/** Determines whether the card should render its children inside a `CardBody` wrapper. */
|
|
44
|
+
hasBody: PropTypes.bool,
|
|
45
|
+
/** Set a custom element for this component. */
|
|
46
|
+
as: PropTypes.elementType,
|
|
47
|
+
/** Additional CSS class names to apply to the card element. */
|
|
48
|
+
className: PropTypes.string,
|
|
49
|
+
/** The content to render inside the card. */
|
|
50
|
+
children: PropTypes.node
|
|
51
|
+
};
|
|
52
|
+
export default BaseCard;
|
|
53
|
+
//# sourceMappingURL=BaseCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseCard.js","names":["React","PropTypes","classNames","CardBody","BASE_CARD_CLASSNAME","colorVariants","textVariants","BaseCard","forwardRef","_ref","ref","prefix","className","bgColor","textColor","borderColor","_ref$hasBody","hasBody","children","_ref$as","as","Component","props","_objectWithoutProperties","_excluded","classes","concat","createElement","_extends","propTypes","string","oneOf","bool","elementType","node"],"sources":["../../src/Card/BaseCard.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport type { ComponentWithAsProp, BsPropsWithAs } from '../utils/types/bootstrap';\n\n// @ts-ignore\nimport CardBody from './CardBody';\n\nconst BASE_CARD_CLASSNAME = 'card';\n\nconst colorVariants = [\n 'primary',\n 'secondary',\n 'success',\n 'danger',\n 'warning',\n 'info',\n 'dark',\n 'light',\n] as const;\n\nconst textVariants = [\n 'white',\n 'muted',\n] as const;\n\ntype ColorVariant = typeof colorVariants[number];\ntype TextVariant = typeof textVariants[number];\ninterface Props extends BsPropsWithAs {\n prefix?: string;\n bgColor?: ColorVariant;\n textColor?: ColorVariant | TextVariant;\n borderColor?: ColorVariant;\n hasBody?: boolean;\n className?: string;\n children: React.ReactNode;\n}\ntype BaseCardType = ComponentWithAsProp<'div', Props>;\n\nconst BaseCard : BaseCardType = React.forwardRef<HTMLDivElement, Props>(\n (\n {\n prefix,\n className,\n bgColor,\n textColor,\n borderColor,\n hasBody = false,\n children,\n as: Component = 'div',\n ...props\n },\n ref,\n ) => {\n const classes = classNames(\n className,\n prefix ? `${prefix}-${BASE_CARD_CLASSNAME}` : BASE_CARD_CLASSNAME,\n bgColor && `bg-${bgColor}`,\n textColor && `text-${textColor}`,\n borderColor && `border-${borderColor}`,\n );\n\n return (\n <Component ref={ref} {...props} className={classes}>\n {hasBody ? <CardBody>{children}</CardBody> : children}\n </Component>\n );\n },\n);\n\n/* eslint-disable react/require-default-props */\nBaseCard.propTypes = {\n /** Prefix for component CSS classes. */\n prefix: PropTypes.string,\n /** Background color of the card. */\n bgColor: PropTypes.oneOf(colorVariants),\n /** Text color of the card. */\n textColor: PropTypes.oneOf([...colorVariants, ...textVariants]),\n /** Border color of the card. */\n borderColor: PropTypes.oneOf(colorVariants),\n /** Determines whether the card should render its children inside a `CardBody` wrapper. */\n hasBody: PropTypes.bool,\n /** Set a custom element for this component. */\n as: PropTypes.elementType,\n /** Additional CSS class names to apply to the card element. */\n className: PropTypes.string,\n /** The content to render inside the card. */\n children: PropTypes.node,\n};\n\nexport default BaseCard;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAInC;AACA,OAAOC,QAAQ,MAAM,YAAY;AAEjC,IAAMC,mBAAmB,GAAG,MAAM;AAElC,IAAMC,aAAa,GAAG,CACpB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,OAAO,CACC;AAEV,IAAMC,YAAY,GAAG,CACnB,OAAO,EACP,OAAO,CACC;AAeV,IAAMC,QAAuB,gBAAGP,KAAK,CAACQ,UAAU,CAC9C,UAAAC,IAAA,EAYEC,GAAG,EACA;EAAA,IAXDC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IAAAC,YAAA,GAAAP,IAAA,CACXQ,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IAAAC,OAAA,GAAAV,IAAA,CACRW,EAAE;IAAEC,SAAS,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAIV,IAAMC,OAAO,GAAGvB,UAAU,CACxBU,SAAS,EACTD,MAAM,MAAAe,MAAA,CAAMf,MAAM,OAAAe,MAAA,CAAItB,mBAAmB,IAAKA,mBAAmB,EACjES,OAAO,UAAAa,MAAA,CAAUb,OAAO,CAAE,EAC1BC,SAAS,YAAAY,MAAA,CAAYZ,SAAS,CAAE,EAChCC,WAAW,cAAAW,MAAA,CAAcX,WAAW,CACtC,CAAC;EAED,oBACEf,KAAA,CAAA2B,aAAA,CAACN,SAAS,EAAAO,QAAA;IAAClB,GAAG,EAAEA;EAAI,GAAKY,KAAK;IAAEV,SAAS,EAAEa;EAAQ,IAChDR,OAAO,gBAAGjB,KAAA,CAAA2B,aAAA,CAACxB,QAAQ,QAAEe,QAAmB,CAAC,GAAGA,QACpC,CAAC;AAEhB,CACF,CAAC;;AAED;AACAX,QAAQ,CAACsB,SAAS,GAAG;EACnB;EACAlB,MAAM,EAAEV,SAAS,CAAC6B,MAAM;EACxB;EACAjB,OAAO,EAAEZ,SAAS,CAAC8B,KAAK,CAAC1B,aAAa,CAAC;EACvC;EACAS,SAAS,EAAEb,SAAS,CAAC8B,KAAK,IAAAL,MAAA,CAAKrB,aAAa,EAAKC,YAAY,CAAC,CAAC;EAC/D;EACAS,WAAW,EAAEd,SAAS,CAAC8B,KAAK,CAAC1B,aAAa,CAAC;EAC3C;EACAY,OAAO,EAAEhB,SAAS,CAAC+B,IAAI;EACvB;EACAZ,EAAE,EAAEnB,SAAS,CAACgC,WAAW;EACzB;EACArB,SAAS,EAAEX,SAAS,CAAC6B,MAAM;EAC3B;EACAZ,QAAQ,EAAEjB,SAAS,CAACiC;AACtB,CAAC;AAED,eAAe3B,QAAQ","ignoreList":[]}
|
package/dist/Card/index.js
CHANGED
|
@@ -9,9 +9,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
9
9
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
10
10
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
11
11
|
import React from 'react';
|
|
12
|
-
import BaseCard from 'react-bootstrap/Card';
|
|
13
12
|
import PropTypes from 'prop-types';
|
|
14
13
|
import classNames from 'classnames';
|
|
14
|
+
import BaseCard from './BaseCard';
|
|
15
15
|
import CardContext, { CardContextProvider } from './CardContext';
|
|
16
16
|
import CardHeader from './CardHeader';
|
|
17
17
|
import CardDivider from './CardDivider';
|
package/dist/Card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseCard","CardContext","CardContextProvider","CardHeader","CardDivider","CardSection","CardFooter","CardImageCap","CardBody","CardStatus","withDeprecatedProps","DeprTypes","CARD_VARIANTS","Card","forwardRef","_ref","ref","orientation","isLoading","className","isClickable","muted","variant","props","_objectWithoutProperties","_excluded","resolvedVariant","createElement","_extends","_defineProperty","horizontal","clickable","concat","tabIndex","default","CardColumns","CardDeck","CardCarousel","CardImg","CardGroup","CardGrid","propTypes","string","oneOf","bool","defaultProps","_objectSpread","undefined","CardWithDeprecatedProp","deprType","REMOVED","message","Status","Header","Divider","Section","Footer","ImageCap","Context","Body"],"sources":["../../src/Card/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseCard from './BaseCard';\nimport CardContext, { CardContextProvider } from './CardContext';\nimport CardHeader from './CardHeader';\nimport CardDivider from './CardDivider';\nimport CardSection from './CardSection';\nimport CardFooter from './CardFooter';\nimport CardImageCap from './CardImageCap';\nimport CardBody from './CardBody';\nimport CardStatus from './CardStatus';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const CARD_VARIANTS = ['light', 'dark', 'muted'];\n\nconst Card = React.forwardRef(({\n orientation,\n isLoading,\n className,\n isClickable,\n muted,\n variant,\n ...props\n}, ref) => {\n const resolvedVariant = muted ? 'muted' : variant;\n\n return (\n <CardContextProvider\n orientation={orientation}\n isLoading={isLoading}\n variant={resolvedVariant}\n >\n <BaseCard\n {...props}\n className={classNames(className, 'pgn__card', {\n horizontal: orientation === 'horizontal',\n clickable: isClickable,\n [`pgn__card-${resolvedVariant}`]: resolvedVariant,\n })}\n ref={ref}\n tabIndex={isClickable ? 0 : -1}\n />\n </CardContextProvider>\n );\n});\n\nexport { default as CardColumns } from 'react-bootstrap/CardColumns';\nexport { default as CardDeck } from './CardDeck';\nexport { default as CardCarousel } from './CardCarousel/CardCarousel';\nexport { default as CardImg } from 'react-bootstrap/CardImg';\nexport { default as CardGroup } from 'react-bootstrap/CardGroup';\nexport { default as CardGrid } from './CardGrid';\n\nCard.propTypes = {\n /** Specifies class name to append to the base element. */\n className: PropTypes.string,\n /** Specifies which orientation to use. */\n orientation: PropTypes.oneOf(['vertical', 'horizontal']),\n /** Specifies whether the `Card` is clickable, if `true` appropriate `hover` and `focus` styling will be added. */\n isClickable: PropTypes.bool,\n /** Specifies loading state. */\n isLoading: PropTypes.bool,\n /** Specifies `Card` style variant. */\n variant: PropTypes.oneOf(CARD_VARIANTS),\n /** **Deprecated**. Specifies whether `Card` uses `muted` variant. Use `variant=\"muted\"` instead. */\n muted: PropTypes.bool,\n};\n\nCard.defaultProps = {\n ...BaseCard.defaultProps,\n className: undefined,\n orientation: 'vertical',\n isClickable: false,\n variant: 'light',\n isLoading: false,\n};\n\nconst CardWithDeprecatedProp = withDeprecatedProps(Card, 'Card', {\n muted: {\n deprType: DeprTypes.REMOVED,\n message: 'Use \"variant\" prop instead, i.e. variant=\"muted\"',\n },\n});\n\nCardWithDeprecatedProp.Status = CardStatus;\nCardWithDeprecatedProp.Header = CardHeader;\nCardWithDeprecatedProp.Divider = CardDivider;\nCardWithDeprecatedProp.Section = CardSection;\nCardWithDeprecatedProp.Footer = CardFooter;\nCardWithDeprecatedProp.ImageCap = CardImageCap;\nCardWithDeprecatedProp.Context = CardContext;\nCardWithDeprecatedProp.Body = CardBody;\n\nexport default CardWithDeprecatedProp;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
|
|
5
|
+
import type { ComponentWithAsProp, BsPropsWithAs } from '../utils/types/bootstrap';
|
|
6
|
+
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
import CardBody from './CardBody';
|
|
9
|
+
|
|
10
|
+
const BASE_CARD_CLASSNAME = 'card';
|
|
11
|
+
|
|
12
|
+
const colorVariants = [
|
|
13
|
+
'primary',
|
|
14
|
+
'secondary',
|
|
15
|
+
'success',
|
|
16
|
+
'danger',
|
|
17
|
+
'warning',
|
|
18
|
+
'info',
|
|
19
|
+
'dark',
|
|
20
|
+
'light',
|
|
21
|
+
] as const;
|
|
22
|
+
|
|
23
|
+
const textVariants = [
|
|
24
|
+
'white',
|
|
25
|
+
'muted',
|
|
26
|
+
] as const;
|
|
27
|
+
|
|
28
|
+
type ColorVariant = typeof colorVariants[number];
|
|
29
|
+
type TextVariant = typeof textVariants[number];
|
|
30
|
+
interface Props extends BsPropsWithAs {
|
|
31
|
+
prefix?: string;
|
|
32
|
+
bgColor?: ColorVariant;
|
|
33
|
+
textColor?: ColorVariant | TextVariant;
|
|
34
|
+
borderColor?: ColorVariant;
|
|
35
|
+
hasBody?: boolean;
|
|
36
|
+
className?: string;
|
|
37
|
+
children: React.ReactNode;
|
|
38
|
+
}
|
|
39
|
+
type BaseCardType = ComponentWithAsProp<'div', Props>;
|
|
40
|
+
|
|
41
|
+
const BaseCard : BaseCardType = React.forwardRef<HTMLDivElement, Props>(
|
|
42
|
+
(
|
|
43
|
+
{
|
|
44
|
+
prefix,
|
|
45
|
+
className,
|
|
46
|
+
bgColor,
|
|
47
|
+
textColor,
|
|
48
|
+
borderColor,
|
|
49
|
+
hasBody = false,
|
|
50
|
+
children,
|
|
51
|
+
as: Component = 'div',
|
|
52
|
+
...props
|
|
53
|
+
},
|
|
54
|
+
ref,
|
|
55
|
+
) => {
|
|
56
|
+
const classes = classNames(
|
|
57
|
+
className,
|
|
58
|
+
prefix ? `${prefix}-${BASE_CARD_CLASSNAME}` : BASE_CARD_CLASSNAME,
|
|
59
|
+
bgColor && `bg-${bgColor}`,
|
|
60
|
+
textColor && `text-${textColor}`,
|
|
61
|
+
borderColor && `border-${borderColor}`,
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<Component ref={ref} {...props} className={classes}>
|
|
66
|
+
{hasBody ? <CardBody>{children}</CardBody> : children}
|
|
67
|
+
</Component>
|
|
68
|
+
);
|
|
69
|
+
},
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
/* eslint-disable react/require-default-props */
|
|
73
|
+
BaseCard.propTypes = {
|
|
74
|
+
/** Prefix for component CSS classes. */
|
|
75
|
+
prefix: PropTypes.string,
|
|
76
|
+
/** Background color of the card. */
|
|
77
|
+
bgColor: PropTypes.oneOf(colorVariants),
|
|
78
|
+
/** Text color of the card. */
|
|
79
|
+
textColor: PropTypes.oneOf([...colorVariants, ...textVariants]),
|
|
80
|
+
/** Border color of the card. */
|
|
81
|
+
borderColor: PropTypes.oneOf(colorVariants),
|
|
82
|
+
/** Determines whether the card should render its children inside a `CardBody` wrapper. */
|
|
83
|
+
hasBody: PropTypes.bool,
|
|
84
|
+
/** Set a custom element for this component. */
|
|
85
|
+
as: PropTypes.elementType,
|
|
86
|
+
/** Additional CSS class names to apply to the card element. */
|
|
87
|
+
className: PropTypes.string,
|
|
88
|
+
/** The content to render inside the card. */
|
|
89
|
+
children: PropTypes.node,
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export default BaseCard;
|
package/src/Card/README.md
CHANGED
|
@@ -26,8 +26,6 @@ notes: |
|
|
|
26
26
|
|
|
27
27
|
`Card` supports `vertical` and `horizontal` orientation which is controlled by `CardContext`, see examples below.
|
|
28
28
|
|
|
29
|
-
This component uses a `Card` from react-bootstrap as a base component and extends it with additional subcomponents. <br/> <a href="https://react-bootstrap-v4.netlify.app/components/cards/" target="_blank" rel="noopener noreferrer">See React-Bootstrap for additional documentation.</a>
|
|
30
|
-
|
|
31
29
|
## Basic Usage
|
|
32
30
|
|
|
33
31
|
```jsx live
|
package/src/Card/index.jsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import BaseCard from 'react-bootstrap/Card';
|
|
3
2
|
import PropTypes from 'prop-types';
|
|
4
3
|
import classNames from 'classnames';
|
|
4
|
+
import BaseCard from './BaseCard';
|
|
5
5
|
import CardContext, { CardContextProvider } from './CardContext';
|
|
6
6
|
import CardHeader from './CardHeader';
|
|
7
7
|
import CardDivider from './CardDivider';
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, screen } from '@testing-library/react';
|
|
3
|
+
|
|
4
|
+
import BaseCard from '../BaseCard';
|
|
5
|
+
|
|
6
|
+
describe('BaseCard Component', () => {
|
|
7
|
+
it('renders a default card', () => {
|
|
8
|
+
render(<BaseCard>Default Card Content</BaseCard>);
|
|
9
|
+
const cardElement = screen.getByText('Default Card Content');
|
|
10
|
+
expect(cardElement).toBeInTheDocument();
|
|
11
|
+
expect(cardElement).toHaveClass('card');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('applies the correct background color', () => {
|
|
15
|
+
render(<BaseCard bgColor="primary">Card with Background</BaseCard>);
|
|
16
|
+
const cardElement = screen.getByText('Card with Background');
|
|
17
|
+
expect(cardElement).toHaveClass('bg-primary');
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it('applies the correct text color', () => {
|
|
21
|
+
render(<BaseCard textColor="muted">Card with Text Color</BaseCard>);
|
|
22
|
+
const cardElement = screen.getByText('Card with Text Color');
|
|
23
|
+
expect(cardElement).toHaveClass('text-muted');
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
it('applies the correct border color', () => {
|
|
27
|
+
render(<BaseCard borderColor="danger">Card with Border Color</BaseCard>);
|
|
28
|
+
const cardElement = screen.getByText('Card with Border Color');
|
|
29
|
+
expect(cardElement).toHaveClass('border-danger');
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
it('renders children inside CardBody when hasBody is true', () => {
|
|
33
|
+
render(
|
|
34
|
+
<BaseCard hasBody>
|
|
35
|
+
<span>Content in CardBody</span>
|
|
36
|
+
</BaseCard>,
|
|
37
|
+
);
|
|
38
|
+
const cardBodyElement = screen.getByText('Content in CardBody');
|
|
39
|
+
expect(cardBodyElement).toBeInTheDocument();
|
|
40
|
+
expect(cardBodyElement.closest('div')).toHaveClass('pgn__card-body');
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('renders children directly when hasBody is false', () => {
|
|
44
|
+
render(
|
|
45
|
+
<BaseCard>
|
|
46
|
+
<span>Direct Content</span>
|
|
47
|
+
</BaseCard>,
|
|
48
|
+
);
|
|
49
|
+
const contentElement = screen.getByText('Direct Content');
|
|
50
|
+
expect(contentElement).toBeInTheDocument();
|
|
51
|
+
expect(contentElement.closest('div')).not.toHaveClass('pgn__card-body');
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it('supports a custom tag with the `as` prop', () => {
|
|
55
|
+
render(
|
|
56
|
+
<BaseCard as="section">
|
|
57
|
+
<span>Custom Tag</span>
|
|
58
|
+
</BaseCard>,
|
|
59
|
+
);
|
|
60
|
+
const sectionElement = screen.getByText('Custom Tag').closest('section');
|
|
61
|
+
expect(sectionElement).toBeInTheDocument();
|
|
62
|
+
expect(sectionElement).toHaveClass('card');
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it('applies additional class names', () => {
|
|
66
|
+
render(<BaseCard className="custom-class">Custom Class</BaseCard>);
|
|
67
|
+
const cardElement = screen.getByText('Custom Class');
|
|
68
|
+
expect(cardElement).toHaveClass('custom-class');
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it('uses prefix correctly', () => {
|
|
72
|
+
render(<BaseCard prefix="test-prefix">Prefixed Card</BaseCard>);
|
|
73
|
+
const cardElement = screen.getByText('Prefixed Card');
|
|
74
|
+
expect(cardElement).toHaveClass('test-prefix-card');
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
it('renders without children', () => {
|
|
78
|
+
render(<BaseCard />);
|
|
79
|
+
const cardElement = document.querySelector('.card');
|
|
80
|
+
expect(cardElement).toBeInTheDocument();
|
|
81
|
+
});
|
|
82
|
+
});
|