diff --git a/.eslintrc.js b/.eslintrc.js
index ae4c4cfdd2..cc55b4443c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -54,6 +54,7 @@ module.exports = {
required: 'id',
allowChildren: false,
}],
+ 'no-param-reassign': [2, { props: false }],
},
env: {
jest: true,
diff --git a/.github/workflows/analyze-dependents.yml b/.github/workflows/analyze-dependents.yml
index 53e9921226..6839a0ec20 100644
--- a/.github/workflows/analyze-dependents.yml
+++ b/.github/workflows/analyze-dependents.yml
@@ -191,6 +191,16 @@ jobs:
with:
repository: edx/studio-frontend
path: dependent-usage-analyzer/.projects/studio-frontend
+ - name: Checkout edx/frontend-app-communications
+ uses: actions/checkout@v2
+ with:
+ repository: edx/frontend-app-communications
+ path: dependent-usage-analyzer/.projects/frontend-app-communications
+ - name: Checkout edx/frontend-app-learner-dashboard
+ uses: actions/checkout@v2
+ with:
+ repository: edx/frontend-app-learner-dashboard
+ path: dependent-usage-analyzer/.projects/frontend-app-learner-dashboard
- name: Verify checkouts
working-directory: dependent-usage-analyzer
run: ls -la .projects
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index cfca2cafe7..bf0ff00660 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,6 +24,9 @@ jobs:
run: |
npm ci
npm run generate-component-install
+ npm run doc-site-install
+ - name: Check Types
+ run: npm run type-check
- name: Lint
run: npm run lint
- name: Test
diff --git a/.github/workflows/manual-publish.yml b/.github/workflows/manual-publish.yml
new file mode 100644
index 0000000000..f6863d4333
--- /dev/null
+++ b/.github/workflows/manual-publish.yml
@@ -0,0 +1,40 @@
+name: Manual Publish
+on: [workflow_dispatch]
+jobs:
+ release:
+ name: Manual Publish
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v2
+ with:
+ fetch-depth: 0
+ - name: Setup Node.js
+ uses: actions/setup-node@v2
+ with:
+ node-version: 16
+ - name: Install dependencies
+ run: npm ci
+ - name: Validate package-lock.json changes
+ run: make validate-no-uncommitted-package-lock-changes
+ - name: Lint
+ run: npm run lint
+ - name: Test
+ run: npm run test
+ - name: i18n_extract
+ run: npm run i18n_extract
+ - name: Coverage
+ uses: codecov/codecov-action@v2
+ - name: Build
+ run: npm run build
+ # NPM expects to be authenticated for publishing. This step will fail CI if NPM is not authenticated
+ - name: Check NPM authentication
+ run: |
+ echo "//registry.npmjs.org/:_authToken=${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}" >> .npmrc
+ npm whoami
+ - name: Release
+ env:
+ GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+ NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+ # `npm publish` relies on version specified in package.json file
+ run: npm publish --tag old-version
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 6fccfebc4e..058eac39f8 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -25,6 +25,7 @@ jobs:
run: |
npm ci
npm run generate-component-install
+ npm run doc-site-install
- name: Lint
run: npm run lint
- name: Test
diff --git a/.github/workflows/update-browserslist-db.yml b/.github/workflows/update-browserslist-db.yml
new file mode 100644
index 0000000000..db4346efe0
--- /dev/null
+++ b/.github/workflows/update-browserslist-db.yml
@@ -0,0 +1,12 @@
+name: Update Browserslist DB
+on:
+ schedule:
+ - cron: '0 0 * * 1'
+ workflow_dispatch:
+
+jobs:
+ update-browserslist:
+ uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
+
+ secrets:
+ requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000..49e27eda3f
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,13 @@
+# Contributing
+
+## Open edX
+
+Please refer to the ["How to Contribute"](https://openedx.org/r/how-to-contribute) documentation and [Code of Conduct](https://openedx.org/code-of-conduct/) from Open edX for general information on contributing to the Open edX project.
+
+## Paragon
+
+The Paragon Working Group accepts bug fixes, new features, documentation, and security patches. You may find open issues [here](https://github.com/openedx/paragon/issues) or by visiting the Paragon Working Group [project board](https://github.com/orgs/openedx/projects/43/views/15). Issues with the "help wanted" or "byte-size" labels may be good candidates to pick up.
+
+If you'd like to contribute a new component or update an existing component, please consider reaching out to the Paragon Working Group via the channels [described in the README](./README.md#getting-help) to propose your changes.
+
+The Paragon Working Group looks forward to your contributions! 💎
diff --git a/Makefile b/Makefile
index 2989e4a9d3..ef1fd811c4 100644
--- a/Makefile
+++ b/Makefile
@@ -48,7 +48,7 @@ push_translations:
# Pulls translations from Transifex.
pull_translations: | requirements
- tx pull -f --mode reviewed --languages=$(transifex_langs)
+ tx pull -t -f --mode reviewed --languages=$(transifex_langs)
# compile files with translated strings to KEYVALUEJSON format which react-intl understands...
npm run-script i18n_compile
diff --git a/README.md b/README.md
index 050476a3d7..3ba1851bbb 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,19 @@
# Paragon
-[](@edx/paragon) [](https://www.npmjs.com/package/@edx/paragon) [](https://github.com/openedx/paragon/actions/workflows/release.yml) [](https://codecov.io/gh/edx/paragon)
+[](https://github.com/openedx/paragon/actions/workflows/release.yml)
+[](@edx/paragon)
+
+
+[](https://codecov.io/gh/edx/paragon)
+[](https://www.npmjs.com/package/@edx/paragon)
-Paragon is a pattern library containing [accessible](https://www.w3.org/WAI/standards-guidelines/aria/) React components and a SCSS foundation built on Twitter Bootstrap. Paragon is developed for the Open edX platform.
+## Purpose
-Documentation lives at https://paragon-openedx.netlify.app/.
+Paragon is a pattern library containing [accessible](https://www.w3.org/WAI/standards-guidelines/aria/) React components and a SCSS foundation built on Twitter Bootstrap. Paragon is developed for the [Open edX](https://openedx.org/) platform.
+Documentation lives at https://paragon-openedx.netlify.app/.
-## Usage
+## Getting Started
### React Components
@@ -36,7 +42,9 @@ Usage for Open edX and others:
@import '~@edx/paragon/scss/core/core.scss';
```
-Usage on edx.org:
+Usage on with `@edx/brand`:
+
+**index.scss**
```
@import '~@edx/brand/paragon/fonts.scss';
@@ -47,133 +55,20 @@ Usage on edx.org:
Note that including fonts will affect performance. In some applications may choose not to load the custom font to keep it highly performant.
-## Contributing & Development
-
-See the [code of conduct](https://github.com/openedx/.github/blob/master/CODE_OF_CONDUCT.md).
-
-#### 1. Start the documentation site development server
-
-The Paragon documentation site serves both as documentation and as a workbench to create your component within. To see your component in action, you need to run the documentation site locally. (Note you need to install dependencies both in the project root and the `www` directory)
-
-```
-npm run install-all
-cd www
-npm start
-```
-
-#### 2. Create new component
-
-To create new component run
-
-```
-npm run generate-component MyComponent
-```
-
-where `MyComponent` is your new component's name.
-
-This will create a directory in `/src/` that will contain templates for all necessary files to start developing the component:
-```
-MyComponent
-├── index.jsx
-├── README.md
-├── MyComponent.scss
-├── _variables.scss
-└── MyComponent.test.jsx
-```
-
-The script will also automatically export your component from Paragon.
-
-#### 3. Start developing
-
-`/src/MyComponent/index.jsx` is where your component lives, the file is created with the following template, edit it to implement your own component.
-
-``` jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const MyComponent = React.forwardRef(({ className, children }, ref) => (
-
- {children}
-
-));
-
-MyComponent.defaultProps = {
- className: undefined,
-};
+## Getting Help
-MyComponent.propTypes = {
- /** A class name to append to the base element. */
- className: PropTypes.string,
- /** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
-};
+Please reach out to the Paragon Working Group (PWG):
-export default MyComponent;
+* Open edX Slack ([request an invite](https://openedx.org/slack)): [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4)
+* [Github Issues](https://github.com/openedx/paragon/issues/new?template=blank-issue.md)
+* [Weekly PWG Meeting](https://calendar.google.com/calendar/embed?src=c_v86shrnegshsqgp4fj2k94u7bc%40group.calendar.google.com&ctz=America%2FNew_York)
-```
-
-#### 4. (Optional) Add styles to your component.
+## Internationalization
-If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+Paragon supports internationalization for its components out of the box with the support of [react-intl](https://formatjs.io/docs/react-intl/). You may view translated strings for each component on the documentation website by switching languages in the settings.
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+Due to Paragon's dependence on ``react-intl``, that means that your whole app needs to be wrapped in its provider, e.g.:
-**Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).**
-
-#### 5. Document you component
-
-The documentation for you component lives in `src/MyComponent/README.md`. The documentation site scans this directory for markdown or mdx files to create pages. By default, the file is created with following content:
-
-```` md
----
-title: 'MyComponent'
-type: 'component'
-components:
-- MyComponent
-status: 'New'
-designStatus: 'Done'
-devStatus: 'Done'
-notes: |
- Something special about this component
----
-
-Describe your component here and give usage examples.
-
-### Basic Usage
-
-```jsx live
-
- Hello!
-
-```
-
-````
-
-##### Some notes on the format above:
-
-The top part of the markdown file is known as `frontmatter`. This metadata with consumed by the documentation site to control the title of the page and the doc site navigation.
-- **title** controls the page title of the generated page
-- **components** is a list of react components by displayName. This usually matches the name you define the component as in code. (In our example so far it is MyComponent). Components added to this list will be scanned by react-docgen for code comments and a props api table will be rendered at the bottom of the page.
-- **categories** is a list of categories where this page will appear the documentation site menu.
-- **status**, **designStatus**, **devStatus**, and **notes** appear in the http://localhost:8000/status page.
-
-JSX code blocks in the markdown file can be made interactive with the live attribute. All paragon components and icons are in scope. (Note: the scope of this code block is controlled by `www/components/CodeBlock.jsx`).
-
-#### 6. Navigate to your component on the doc site and start building
-
-Visit the documentation at [http://localhost:8000](http://localhost:8000) and navigate to see your README.md powered page and workbench. Changes to the README.md file will auto refresh the page.
-
-### Internationalization
-
-Paragon supports internationalization for its components out of the box with the support of [react-intl](https://formatjs.io/docs/react-intl/). You can view translated strings for each component on the docs site after switching language on a settings tab.
-
-#### For consumers
-
-Since we are using ``react-intl`` that means that your whole app needs to be wrapped in its context, e.g.
```javascript
import { IntlProvider } from 'react-intl';
import { messages as paragonMessages } from '@edx/paragon';
@@ -186,8 +81,7 @@ Since we are using ``react-intl`` that means that your whole app needs to be wra
)
```
-Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` component you don't need a separate context,
-you would only need to add Paragon's messages like this
+Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` component, you don't need a separate context as `IntlProvider` is already included; you would only need to add Paragon's i18n messages like this:
```javascript
import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
@@ -217,7 +111,46 @@ you would only need to add Paragon's messages like this
});
```
-#### For developers
+## Contributing
+
+Please refer to the ["How to Contribute"](https://openedx.org/r/how-to-contribute) documentation and [Code of Conduct](https://openedx.org/code-of-conduct/) from Open edX.
+
+The Paragon Working Group accepts bug fixes, new features, documentation, and security patches. You may find open issues [here](https://github.com/openedx/paragon/issues) or by visiting the Paragon Working Group [project board](https://github.com/orgs/openedx/projects/43/views/15).
+
+If you'd like to contribute a new component or update an existing component, please consider reaching out to the Paragon Working Group via the channels [described above](#getting-help) to propose your changes.
+
+The Paragon Working Group looks forward to your contributions! 💎
+
+### Development
+
+#### Developing locally against a micro-frontend (MFE)
+
+If you want to test the changes with local MFE setup, you need to create a "module.config.js" file in your MFE's directory containing local module overrides. After that the webpack build for your application will automatically pick your local version of Paragon and use it. The example of module.config.js file looks like this (for more details about module.config.js, refer to the [frontend-build documentation](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack).):
+
+```javascript
+module.exports = {
+ /*
+ Modules you want to use from local source code. Adding a module here means that when
+ your MFE runs its build, it'll resolve the source from peer directories of the app.
+
+ moduleName: the name you use to import code from the module.
+ dir: The relative path to the module's source code.
+ dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
+ */
+ localModules: [
+ { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
+ { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
+ // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
+ // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
+ // To avoid doing that you can use dist: 'src' to get any local changes hot reloaded on save in the MFE.
+ { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
+ ],
+};
+```
+
+Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@edx/paragon/scss/core";`
+
+#### Internationalization
When developing a new component you should generally follow three rules:
1. The component should not have **any** hardcoded strings as it would be impossible for consumers to translate it
@@ -301,32 +234,124 @@ When developing a new component you should generally follow three rules:
};
```
-### Developing locally against MFE
+#### Adding a new component
-If you want to test the changes with local MFE setup, you need to create a "module.config.js" file in your MFE's directory containing local module overrides. After that the webpack build for your application will automatically pick your local version of Paragon and use it. The example of module.config.js file looks like this (for more details about module.config.js, refer to the [frontend-build documentation](https://github.com/openedx/frontend-build#local-module-configuration-for-webpack).):
+##### 1. Start the documentation site development server
-```javascript
-module.exports = {
- /*
- Modules you want to use from local source code. Adding a module here means that when
- your MFE runs its build, it'll resolve the source from peer directories of the app.
+The Paragon documentation site serves both as documentation and as a workbench to create your component within. To see your component in action, you need to run the documentation site locally. (Note you need to install dependencies both in the project root and the `www` directory)
- moduleName: the name you use to import code from the module.
- dir: The relative path to the module's source code.
- dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
- */
- localModules: [
- { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
- { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
- // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
- // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
- // To avoid doing that you can use dist: 'src' to get any local changes hot reloaded on save in the MFE.
- { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
- ],
+```
+npm run install-all
+cd www
+npm start
+```
+
+##### 2. Create new component
+
+To create new component run
+
+```
+npm run generate-component MyComponent
+```
+
+where `MyComponent` is your new component's name.
+
+This will create a directory in `/src/` that will contain templates for all necessary files to start developing the component:
+```
+MyComponent
+├── index.jsx
+├── README.md
+├── MyComponent.scss
+├── _variables.scss
+└── MyComponent.test.jsx
+```
+
+The script will also automatically export your component from Paragon.
+
+##### 3. Start developing
+
+`/src/MyComponent/index.jsx` is where your component lives, the file is created with the following template, edit it to implement your own component.
+
+``` jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const MyComponent = React.forwardRef(({ className, children }, ref) => (
+
```
@@ -36,7 +36,7 @@ A button that contains the user’s Avatar.
```jsx live
-
+
Casey
@@ -55,7 +55,7 @@ Props set on Dropdown.Toggle get passed through to the "as" component
```jsx live
-
+
Casey
@@ -77,17 +77,17 @@ For use in mobile viewports or constrained views.
```jsx live
<>
+ );
+}
+
+CardCarouselHeader.propTypes = {
+ title: PropTypes.node,
+ subtitle: PropTypes.node,
+};
+
+CardCarouselHeader.defaultProps = {
+ title: undefined,
+ subtitle: undefined,
+};
+
+export default CardCarouselHeader;
diff --git a/src/Card/CardCarousel/CardCarouselItems.jsx b/src/Card/CardCarousel/CardCarouselItems.jsx
new file mode 100644
index 0000000000..7f70d5cc1e
--- /dev/null
+++ b/src/Card/CardCarousel/CardCarouselItems.jsx
@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import CardDeck from '../CardDeck';
+import { CardCarouselContext } from './CardCarouselProvider';
+
+function CardCarouselItems({ children }) {
+ const {
+ columnSizes,
+ hasInteractiveChildren,
+ canScrollHorizontal,
+ setOverflowRef,
+ } = useContext(CardCarouselContext);
+
+ return (
+
+ {children}
+
+ );
+}
+
+CardCarouselItems.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+export default CardCarouselItems;
diff --git a/src/Card/CardCarousel/CardCarouselProvider.jsx b/src/Card/CardCarousel/CardCarouselProvider.jsx
new file mode 100644
index 0000000000..8c34dab187
--- /dev/null
+++ b/src/Card/CardCarousel/CardCarouselProvider.jsx
@@ -0,0 +1,87 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { OverflowScrollContext } from '../..';
+
+export const CardCarouselContext = createContext();
+
+function CardCarouselProvider({
+ columnSizes,
+ hasInteractiveChildren,
+ canScrollHorizontal,
+ children,
+ CardCarouselControls,
+}) {
+ const {
+ overflowRef,
+ setOverflowRef,
+ isScrolledToStart,
+ isScrolledToEnd,
+ scrollToPrevious,
+ scrollToNext,
+ } = useContext(OverflowScrollContext);
+
+ const cardCarouselContextValue = useMemo(() => ({
+ overflowRef,
+ setOverflowRef,
+ columnSizes,
+ hasInteractiveChildren,
+ canScrollHorizontal,
+ isScrolledToStart,
+ isScrolledToEnd,
+ scrollToPrevious,
+ scrollToNext,
+ CardCarouselControls,
+ }), [
+ overflowRef,
+ setOverflowRef,
+ columnSizes,
+ hasInteractiveChildren,
+ canScrollHorizontal,
+ isScrolledToStart,
+ isScrolledToEnd,
+ scrollToPrevious,
+ scrollToNext,
+ CardCarouselControls,
+ ]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+CardCarouselProvider.propTypes = {
+ children: PropTypes.node.isRequired,
+ /**
+ * An object containing the desired column size at each breakpoint, following a similar
+ * props API as ``react-bootstrap/Col``
+ */
+ columnSizes: PropTypes.shape({
+ xs: PropTypes.number,
+ sm: PropTypes.number,
+ md: PropTypes.number,
+ lg: PropTypes.number,
+ xl: PropTypes.number,
+ }),
+ /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex="0"` is
+ * added to be a11y-compliant */
+ hasInteractiveChildren: PropTypes.bool,
+ /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */
+ canScrollHorizontal: PropTypes.bool,
+ /** Optional override for the default `CardCarouselControls` */
+ CardCarouselControls: PropTypes.elementType,
+};
+
+CardCarouselProvider.defaultProps = {
+ columnSizes: {
+ sm: 12,
+ lg: 6,
+ xl: 4,
+ },
+ hasInteractiveChildren: false,
+ canScrollHorizontal: true,
+ CardCarouselControls: undefined,
+};
+
+export default CardCarouselProvider;
diff --git a/src/Card/CardCarousel/CardCarouselSubtitle.jsx b/src/Card/CardCarousel/CardCarouselSubtitle.jsx
new file mode 100644
index 0000000000..85369d2f90
--- /dev/null
+++ b/src/Card/CardCarousel/CardCarouselSubtitle.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+function CardCarouselSubtitle({ children, as, className }) {
+ const Component = as || 'p';
+ return (
+
+ {children}
+
+ );
+}
+
+CardCarouselSubtitle.propTypes = {
+ children: PropTypes.node.isRequired,
+ as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+ className: PropTypes.string,
+};
+
+CardCarouselSubtitle.defaultProps = {
+ as: undefined,
+ className: undefined,
+};
+
+export default CardCarouselSubtitle;
diff --git a/src/Card/CardCarousel/CardCarouselTitle.jsx b/src/Card/CardCarousel/CardCarouselTitle.jsx
new file mode 100644
index 0000000000..a7ac7ff0b9
--- /dev/null
+++ b/src/Card/CardCarousel/CardCarouselTitle.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+function CardCarouselTitle({ children, as, className }) {
+ const Component = as || 'h2';
+ return (
+
+ {children}
+
+ );
+}
+
+CardCarouselTitle.propTypes = {
+ children: PropTypes.node.isRequired,
+ as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+ className: PropTypes.string,
+};
+
+CardCarouselTitle.defaultProps = {
+ as: undefined,
+ className: undefined,
+};
+
+export default CardCarouselTitle;
diff --git a/src/Card/CardCarousel/index.js b/src/Card/CardCarousel/index.js
new file mode 100644
index 0000000000..ecf602ee9f
--- /dev/null
+++ b/src/Card/CardCarousel/index.js
@@ -0,0 +1,3 @@
+import CardCarousel from './CardCarousel';
+
+export default CardCarousel;
diff --git a/src/Card/CardCarousel/messages.js b/src/Card/CardCarousel/messages.js
new file mode 100644
index 0000000000..a4a4d66894
--- /dev/null
+++ b/src/Card/CardCarousel/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+ scrollToPrevious: {
+ id: 'pgn.CardCarousel.scrollToPrevious',
+ defaultMessage: 'Scroll to previous',
+ description: 'Accessibility text describing the action for navigating a scrollable carousel to the previous element',
+ },
+ scrollToNext: {
+ id: 'pgn.CardCarousel.scrollToNext',
+ defaultMessage: 'Scroll to next',
+ description: 'Accessibility text describing the action for navigating a scrollable carousel to the next element',
+ },
+});
+
+export default messages;
diff --git a/src/Card/CardCarousel/tests/CardCarousel.test.jsx b/src/Card/CardCarousel/tests/CardCarousel.test.jsx
new file mode 100644
index 0000000000..f4d0fb21b9
--- /dev/null
+++ b/src/Card/CardCarousel/tests/CardCarousel.test.jsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import renderer from 'react-test-renderer';
+import { v4 as uuidv4 } from 'uuid';
+import { IntlProvider } from 'react-intl';
+import CardCarousel from '../CardCarousel';
+import Card from '../..';
+import { OverflowScroll, OverflowScrollContext } from '../../../OverflowScroll';
+
+jest.mock('../../../OverflowScroll', () => ({
+ ...jest.requireActual('../../../OverflowScroll'),
+ OverflowScroll: jest.fn(),
+}));
+
+// eslint-disable-next-line react/prop-types
+OverflowScroll.mockImplementation(({ children }) => {
+ const overflowRef = { current: document.createElement('div') };
+ const contextValue = {
+ overflowRef,
+ isScrolledToStart: true,
+ isScrolledToEnd: false,
+ scrollToPrevious: jest.fn(),
+ scrollToNext: jest.fn(),
+ };
+
+ return (
+
+
{children}
+
+ );
+});
+
+function ExampleCard(props) {
+ return (
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural lead-in to
+ additional content. This card has even longer content than the first to
+ show that equal height action.
+
+
+ Last updated 3 mins ago} />
+
+ );
+}
+
+function getCardContent({ cardCount = 5, ...cardProps } = {}) {
+ return Array.from({ length: cardCount }).map(() => );
+}
+
+function CardCarouselWrapper({ children, ...rest }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+CardCarouselWrapper.propTypes = {
+ children: PropTypes.node.isRequired,
+ ariaLabel: PropTypes.string,
+};
+
+CardCarouselWrapper.defaultProps = {
+ ariaLabel: 'example card carousel',
+};
+
+describe('', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders default card carousel', () => {
+ const cardContent = getCardContent();
+ const tree = renderer.create((
+
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders card carousel with title and subtitles', () => {
+ const cardContent = getCardContent();
+ const tree = renderer.create((
+
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders card carousel with custom title and subtitles elements', () => {
+ const cardContent = getCardContent();
+ const tree = renderer.create((
+ Example Title}
+ subtitle={
Example subtitle
}
+ >
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx
new file mode 100644
index 0000000000..0a8c63c66c
--- /dev/null
+++ b/src/Card/CardCarousel/tests/CardCarouselControls.test.jsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
+import { CardCarouselContext } from '../CardCarouselProvider';
+import CardCarouselControls from '../CardCarouselControls';
+
+const mockScrollToPrevious = jest.fn();
+const mockScrollToNext = jest.fn();
+const defaultCardCarouselContextValue = {
+ isScrolledToStart: false,
+ isScrolledToEnd: false,
+ scrollToPrevious: mockScrollToPrevious,
+ scrollToNext: mockScrollToNext,
+};
+
+function CardCarouselControlsWrapper({
+ cardCarouselContextValue,
+ ...rest
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+CardCarouselControlsWrapper.propTypes = {
+ cardCarouselContextValue: PropTypes.shape(),
+};
+
+CardCarouselControlsWrapper.defaultProps = {
+ cardCarouselContextValue: defaultCardCarouselContextValue,
+};
+
+describe('', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders with disabled previous control when scrolled to start', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToStart: true,
+ };
+ const tree = renderer.create((
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders with disabled next control when scrolled to end', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToEnd: true,
+ };
+ const tree = renderer.create((
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders with enabled controls when not scrolled to start/end', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToStart: false,
+ isScrolledToEnd: false,
+ };
+ const tree = renderer.create((
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders without controls when both previous/next controls would be disabled', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToStart: true,
+ isScrolledToEnd: true,
+ };
+ const tree = renderer.create((
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('handles scroll to previous click', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToStart: false,
+ };
+ render((
+
+ ));
+ userEvent.click(screen.getByLabelText('Scroll to previous'));
+ expect(mockScrollToPrevious).toHaveBeenCalledTimes(1);
+ });
+
+ it('handles scroll to next click', () => {
+ const contextValue = {
+ ...defaultCardCarouselContextValue,
+ isScrolledToEnd: false,
+ };
+ render((
+
+ ));
+ userEvent.click(screen.getByLabelText('Scroll to next'));
+ expect(mockScrollToNext).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap b/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap
new file mode 100644
index 0000000000..0d1de6664a
--- /dev/null
+++ b/src/Card/CardCarousel/tests/__snapshots__/CardCarousel.test.jsx.snap
@@ -0,0 +1,1026 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` renders card carousel with custom title and subtitles elements 1`] = `
+
+
+
+
+
+ Example Title
+
+
+ Example subtitle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` renders card carousel with title and subtitles 1`] = `
+
+
+
+
+
+ Example Title
+
+
+ Example subtitle.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/Card/CardCarousel/tests/__snapshots__/CardCarouselControls.test.jsx.snap b/src/Card/CardCarousel/tests/__snapshots__/CardCarouselControls.test.jsx.snap
new file mode 100644
index 0000000000..dcbcfb563d
--- /dev/null
+++ b/src/Card/CardCarousel/tests/__snapshots__/CardCarouselControls.test.jsx.snap
@@ -0,0 +1,222 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` renders with disabled next control when scrolled to end 1`] = `
+
+
+
+
+
+
+`;
+
+exports[` renders with disabled previous control when scrolled to start 1`] = `
+
+
+
+
+
+
+`;
+
+exports[` renders with enabled controls when not scrolled to start/end 1`] = `
+
+ );
+});
+
+CardDeck.propTypes = {
+ /** The class name for the CardDeck component */
+ className: PropTypes.string,
+ /** The Card components to organize */
+ children: PropTypes.node.isRequired,
+ /**
+ * An object containing the desired column size at each breakpoint, following a similar
+ * props API as ``react-bootstrap/Col``
+ */
+ columnSizes: PropTypes.shape({
+ xs: PropTypes.number,
+ sm: PropTypes.number,
+ md: PropTypes.number,
+ lg: PropTypes.number,
+ xl: PropTypes.number,
+ }),
+ /** Whether the child `Card` components are interactive/focusable. If not, a `tabindex="0"` is
+ * added to be a11y-compliant */
+ hasInteractiveChildren: PropTypes.bool,
+ /** Whether the `CardDeck` supports horizontal scrolling when there are overflow children */
+ canScrollHorizontal: PropTypes.bool,
+ /** Whether the children of CardDeck should be processed by `useOverflowScrollItems` to give
+ * each child a known/stable CSS classname */
+ hasOverflowScrollItems: PropTypes.bool,
+};
+
+CardDeck.defaultProps = {
+ className: undefined,
+ columnSizes: {
+ sm: 12,
+ lg: 6,
+ xl: 4,
+ },
+ hasInteractiveChildren: false,
+ canScrollHorizontal: true,
+ hasOverflowScrollItems: false,
+};
+
+CardDeck.Deprecated = BaseCardDeck;
+
+export default CardDeck;
diff --git a/src/Card/CardFooter.jsx b/src/Card/CardFooter.jsx
index 2cb673507d..ec2fca5dff 100644
--- a/src/Card/CardFooter.jsx
+++ b/src/Card/CardFooter.jsx
@@ -42,7 +42,7 @@ const CardFooter = React.forwardRef(({
CardFooter.propTypes = {
/** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
+ children: PropTypes.node,
/** Specifies class name to append to the base element. */
className: PropTypes.string,
/** Optional node to display near actions. Should be either a plain text or an element containing text (e.g. link). */
@@ -58,6 +58,7 @@ CardFooter.propTypes = {
};
CardFooter.defaultProps = {
+ children: null,
className: undefined,
textElement: undefined,
isStacked: false,
diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index 36984d6e5b..dc87c1bff3 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -1,8 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Skeleton from 'react-loading-skeleton';
import CardContext from './CardContext';
+import cardSrcFallbackImg from './fallback-default.png';
const SKELETON_HEIGHT_VALUE = 140;
const LOGO_SKELETON_HEIGHT_VALUE = 41;
@@ -22,6 +23,8 @@ const CardImageCap = React.forwardRef(({
className,
}, ref) => {
const { orientation, isLoading } = useContext(CardContext);
+ const [showImageCap, setShowImageCap] = useState(false);
+ const [showLogoCap, setShowLogoCap] = useState(false);
const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
if (isLoading) {
@@ -44,26 +47,39 @@ const CardImageCap = React.forwardRef(({
);
}
- const handleSrcFallback = (event, altSrc) => {
+ const handleSrcFallback = (event, altSrc, imageKey) => {
const { currentTarget } = event;
- if (currentTarget.src !== altSrc) {
- currentTarget.src = altSrc;
+
+ if (!altSrc || currentTarget.src.endsWith(altSrc)) {
+ if (imageKey === 'imageCap') {
+ currentTarget.src = cardSrcFallbackImg;
+ } else {
+ setShowLogoCap(false);
+ }
+
+ return;
}
+
+ currentTarget.src = altSrc;
};
return (
- handleSrcFallback(event, fallbackSrc)}
- alt={srcAlt}
- />
+ {!!src && (
+ handleSrcFallback(event, fallbackSrc, 'imageCap')}
+ onLoad={() => setShowImageCap(true)}
+ alt={srcAlt}
+ />
+ )}
{!!logoSrc && (
handleSrcFallback(event, fallbackLogoSrc)}
+ onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
+ onLoad={() => setShowLogoCap(true)}
alt={logoAlt}
/>
)}
@@ -100,7 +116,7 @@ CardImageCap.propTypes = {
CardImageCap.defaultProps = {
src: undefined,
- fallbackSrc: undefined,
+ fallbackSrc: cardSrcFallbackImg,
logoSrc: undefined,
fallbackLogoSrc: undefined,
className: undefined,
diff --git a/src/Card/CardSection.jsx b/src/Card/CardSection.jsx
index 210d53832d..d5cc2c35a7 100644
--- a/src/Card/CardSection.jsx
+++ b/src/Card/CardSection.jsx
@@ -45,7 +45,7 @@ CardSection.propTypes = {
/** Specifies class name to append to the base element. */
className: PropTypes.string,
/** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
+ children: PropTypes.node,
/** Specifies title of the `Section`. */
title: PropTypes.node,
/** Specifies node to render on the bottom right of the `Section` (i.e. `ActionRow`). */
@@ -59,6 +59,7 @@ CardSection.propTypes = {
};
CardSection.defaultProps = {
+ children: null,
className: undefined,
title: undefined,
actions: undefined,
diff --git a/src/Card/README.md b/src/Card/README.md
index 220a0a1424..6e2fb3ec7d 100644
--- a/src/Card/README.md
+++ b/src/Card/README.md
@@ -35,7 +35,7 @@ This component uses a `Card` from react-bootstrap as a base component and extend
return (
{
+ const [cardVariant, setCardVariant] = useState('light');
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
return (
-
-
-
+ {/* start example form block */}
+
-
- This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
-
-
-
-
-
+ {/* end example form block */}
+
+
+
+
+
+ This is a card section. It can contain anything but usually text, a list, or list of links. Multiple sections have a card divider between them.
+
+
+
+
+
+
)}
```
-## Clickable variant
+## Clickable card
You use `isClickable` prop to add additional `hover` and `focus` styling to the `Card`.
@@ -89,7 +102,7 @@ You use `isClickable` prop to add additional `hover` and `focus` styling to the
return (
@@ -244,16 +257,15 @@ Add ``size="sm"`` for smaller header content and actions.
}
- muted
>
- This is a muted variant.
+ This is another section variant.
@@ -348,7 +360,7 @@ Note that `Card.Footer` has a separate `orientation` prop which will override th
return (
{/* end example form block */}
@@ -512,7 +524,7 @@ Note that in the example below, the content of `Card` is wrapped inside `Card.Bo
return (
@@ -551,7 +563,7 @@ Note that in the example below, the content of `Card` is wrapped inside `Card.Bo
return (
@@ -585,8 +597,8 @@ Note that in the example below, the content of `Card` is wrapped inside `Card.Bo
)}
```
-
-## With Fallback Image
+## Fallback Image
+### With Fallback custom Image
You can specify `fallbackSrc` image to show in case your main `src` fails to load.
A fallback source is available for both the main `ImageCap` component image and the logo.
@@ -598,20 +610,49 @@ A fallback source is available for both the main `ImageCap` component image and
return (
- This is a card section. It can contain anything but usually text, a list, or list of links.
- Multiple sections have a card divider between them.
+ This is a card section. It can contain anything but usually text, a list, or list of links.
+ Multiple sections have a card divider between them.
-
+
+
+
+)}
+```
+
+### With default Fallback Image
+
+The default fallback image will be displayed if `fallbackSrc` is not specified.
+
+```jsx live
+() => {
+ const isExtraSmall = useMediaQuery({maxWidth: breakpoints.small.maxWidth});
+
+ return (
+
+
+
+
+ This is a card section. It can contain anything but usually text, a list, or list of links.
+ Multiple sections have a card divider between them.
+
+
+
)}
@@ -627,7 +668,7 @@ A fallback source is available for both the main `ImageCap` component image and
return (
@@ -650,8 +691,8 @@ A fallback source is available for both the main `ImageCap` component image and
return (
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
-
- Last updated 3 mins ago
-
+ Last updated 3 mins ago} />
```
-## CardDeck (Deprecated)
+## CardDeck
-This component gives any child Card components equal height with an appropriate gutter between cards. However,
-it is meant to be used as a single horizontal row of Cards, not as a grid. See CardGrid for more details.
+Displays child `Card` components in a horizontal row with equal height and width, with an appropriate gutter between cards. The width of each child `Card` component is determined by the (optional) `columnSizes` prop. If any child `Card` components overflow beyond the parent's width, they will be hidden but accessible via scrolling horizontally or keyboard navigation.
-**Note**: this component is deprecated and is going to be removed soon.
+For accessibility, if the child `Card` components are interactive (e.g., `isClickable`), pass the `hasInteractiveChildren` prop so the `CardDeck` itself isn't focusable.
```jsx live
-
-
-
-
-
- This is a wider card with supporting text below as a natural lead-in to
- additional content. This card has even longer content than the first to
- show that equal height action.
-
-
- Last updated 3 mins ago
-
-
-
-
-
-
- This is a wider card with supporting text below as a natural lead-in to
- additional content. This content is a little bit longer.
-
-
- Last updated 3 mins ago
-
-
-
-
-
-
- This is a wider card with supporting text below as a natural lead-in to
- additional content. This card has even longer content than the first to
- show that equal height action.
-
-
- Last updated 3 mins ago
-
-
-
-```
\ No newline at end of file
+() => {
+ const [hasInteractiveChildren, setHasInteractiveChildren] = useState('false');
+
+ const CardComponent = () => (
+
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ {/* start example form block */}
+
+ {/* end example form block */}
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+### CardDeck.Deprecated
+
+Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width.
+
+Note: This component is a pass-thru from `react-bootstrap`.
+
+```jsx live
+() => {
+ const CardComponent = () => (
+
+
+
+
+
+
+
+ );
+
+ return (
+
+
+
+
+
+ )
+}
+```
+
+## CardCarousel
+
+Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel.
+
+Includes support for an optional `title` and `subtitle`. You may rely on the default styles for the titles (e.g., if passing strings) or alternatively you may also pass custom HTML and JSX.
+
+```jsx live
+() => {
+ const [canScrollHorizontal, setCanScrollHorizontal] = useState('true');
+ const [disableOpacityMasks, setDisableOpacityMasks] = useState('false');
+ const [hasOverflowCards, setHasOverflowCards] = useState('true');
+
+ const CardComponent = () => (
+
+
+
+
+
+
+
+ );
+
+ const cardItems = useMemo(() => {
+ if (hasOverflowCards === 'true') {
+ return Array.from({ length: 8 }).map(() => );
+ }
+ return Array.from({ length: 2 }).map(() => );
+ }, [hasOverflowCards]);
+
+ return (
+ <>
+ {/* start example form block */}
+
+ {/* end example form block */}
+
+ Recommended for you}
+ subtitle="The following content was picked just for you."
+ canScrollHorizontal={canScrollHorizontal === 'true'}
+ disableOpacityMasks={disableOpacityMasks === 'true'}
+ onScrollPrevious={() => { console.log('onScrollPrevious'); } }
+ onScrollNext={() => { console.log('onScrollNext'); } }
+ >
+ {cardItems}
+
+
+ );
+}
+```
diff --git a/src/Card/_variables.scss b/src/Card/_variables.scss
index c6c6cab723..b79936f841 100644
--- a/src/Card/_variables.scss
+++ b/src/Card/_variables.scss
@@ -1,21 +1,29 @@
-// Cards
+// Card
$card-spacer-y: var(--pgn-spacing-card-spacer-y) !default;
$card-spacer-x: var(--pgn-spacing-card-spacer-x) !default;
$card-border-width: var(--pgn-size-card-border-width) !default;
$card-border-radius: var(--pgn-size-card-border-radius-base) !default;
$card-border-color: var(--pgn-color-card-border-base) !default;
-$card-border-focus-color: var(--pgn-color-card-border-focus) !default;
+$card-border-focus-color: var(--pgn-color-card-border-focus-base) !default;
+$card-border-focus-color-dark: var(--pgn-color-card-border-focus-dark) !default;
+$card-cap-bg: var(--pgn-card-cap-bg) !default;
+$card-cap-color: var(--pgn-card-cap-color) !default;
+$card-height: var(--pgn-card-height-base) !default;
+$card-bg-dark: var(--pgn-color-card-bg-dark) !default;
+$card-bg-muted: var(--pgn-color-card-bg-muted) !default;
// TODO: Need to deleted this variable after refactoring Card component
// stylelint-disable-next-line max-line-length
$card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default;
$card-color: var(--pgn-color-card-base) !default;
-$card-bg: var(--pgn-color-card-bg) !default;
+$card-bg: var(--pgn-color-card-bg-base) !default;
$card-group-margin: var(--pgn-spacing-card-margin-group) !default;
$card-deck-margin: var(--pgn-spacing-card-margin-deck) !default;
$card-grid-margin: var(--pgn-spacing-card-margin-grid) !default;
+$card-deck-margin-bottom: var(--pgn-spacing-card-margin-deck-bottom) !default;
+$card-grid-margin-bottom: var(--pgn-spacing-card-margin-grid-bottom) !default;
$card-columns-count: var(--pgn-spacing-card-columns-count) !default;
$card-columns-gap: var(--pgn-spacing-card-columns-gap) !default;
@@ -42,3 +50,7 @@ $card-image-horizontal-max-width: var(--pgn-size-card-image-horizontal-width-max
$card-image-horizontal-min-width: var(--pgn-size-card-image-horizontal-width-min) !default;
$card-image-vertical-max-height: var(--pgn-size-card-image-vertical-max-height) !default;
$loading-skeleton-spacer: var(--pgn-spacing-card-loading-skeleton-spacer) !default;
+
+$card-focus-border-offset: var(--pgn-spacing-card-focus-border-offset) !default;
+$card-focus-border-width: var(--pgn-size-card-focus-border-width) !default;
+$card-focus-border-radius: var(--pgn-size-card-focus-border-radius) !default;
diff --git a/src/Card/fallback-default.png b/src/Card/fallback-default.png
new file mode 100644
index 0000000000..b18d751d26
Binary files /dev/null and b/src/Card/fallback-default.png differ
diff --git a/src/Card/index.jsx b/src/Card/index.jsx
index 37daca5fc9..463a81aa22 100644
--- a/src/Card/index.jsx
+++ b/src/Card/index.jsx
@@ -10,6 +10,9 @@ import CardFooter from './CardFooter';
import CardImageCap from './CardImageCap';
import CardBody from './CardBody';
import CardStatus from './CardStatus';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+
+export const CARD_VARIANTS = ['light', 'dark', 'muted'];
const Card = React.forwardRef(({
orientation,
@@ -17,24 +20,34 @@ const Card = React.forwardRef(({
className,
isClickable,
muted,
+ variant,
...props
-}, ref) => (
-
-
-
-));
+}, ref) => {
+ const resolvedVariant = muted ? 'muted' : variant;
+
+ return (
+
+
+
+ );
+});
export { default as CardColumns } from 'react-bootstrap/CardColumns';
-export { default as CardDeck } from 'react-bootstrap/CardDeck';
+export { default as CardDeck } from './CardDeck';
+export { default as CardCarousel } from './CardCarousel/CardCarousel';
export { default as CardImg } from 'react-bootstrap/CardImg';
export { default as CardGroup } from 'react-bootstrap/CardGroup';
export { default as CardGrid } from './CardGrid';
@@ -49,7 +62,9 @@ Card.propTypes = {
isClickable: PropTypes.bool,
/** Specifies loading state. */
isLoading: PropTypes.bool,
- /** Specifies whether to display `Card` in muted styling. */
+ /** Specifies `Card` style variant. */
+ variant: PropTypes.oneOf(CARD_VARIANTS),
+ /** **Deprecated**. Specifies whether `Card` uses `muted` variant. Use `variant="muted"` instead. */
muted: PropTypes.bool,
};
@@ -58,16 +73,24 @@ Card.defaultProps = {
className: undefined,
orientation: 'vertical',
isClickable: false,
- muted: false,
+ variant: 'light',
isLoading: false,
};
-Card.Status = CardStatus;
-Card.Header = CardHeader;
-Card.Divider = CardDivider;
-Card.Section = CardSection;
-Card.Footer = CardFooter;
-Card.ImageCap = CardImageCap;
-Card.Context = CardContext;
-Card.Body = CardBody;
-export default Card;
+const CardWithDeprecatedProp = withDeprecatedProps(Card, 'Card', {
+ muted: {
+ deprType: DeprTypes.REMOVED,
+ message: 'Use "variant" prop instead, i.e. variant="muted"',
+ },
+});
+
+CardWithDeprecatedProp.Status = CardStatus;
+CardWithDeprecatedProp.Header = CardHeader;
+CardWithDeprecatedProp.Divider = CardDivider;
+CardWithDeprecatedProp.Section = CardSection;
+CardWithDeprecatedProp.Footer = CardFooter;
+CardWithDeprecatedProp.ImageCap = CardImageCap;
+CardWithDeprecatedProp.Context = CardContext;
+CardWithDeprecatedProp.Body = CardBody;
+
+export default CardWithDeprecatedProp;
diff --git a/src/Card/tests/CardBody.test.jsx b/src/Card/tests/CardBody.test.jsx
index 05f44a9649..346b24b69c 100644
--- a/src/Card/tests/CardBody.test.jsx
+++ b/src/Card/tests/CardBody.test.jsx
@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import renderer from 'react-test-renderer';
import CardBody from '../CardBody';
+import Card from '../index';
describe('correct rendering', () => {
it('renders CardBody element', () => {
@@ -18,6 +19,11 @@ describe('correct rendering', () => {
expect(body.hasClass('pgn__card-body')).toBe(true);
});
+ it('renders correct variant', () => {
+ const wrapper = mount().find('div');
+ expect(wrapper.hasClass('pgn__card-dark')).toBe(true);
+ });
+
it('renders body with custom className', () => {
const className = 'my-class-name';
const body = mount().find('div');
diff --git a/src/Card/tests/CardContext.test.jsx b/src/Card/tests/CardContext.test.jsx
index 924e25ab35..833b1fba72 100644
--- a/src/Card/tests/CardContext.test.jsx
+++ b/src/Card/tests/CardContext.test.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { CardContextProvider } from '../CardContext';
@@ -14,7 +14,7 @@ describe('correct rendering', () => {
});
it('renders a context with correct props', () => {
- const wrapper = shallow((
+ const wrapper = mount((
));
const contextProvider = wrapper.find(CardContextProvider);
diff --git a/src/Card/tests/CardDeck.test.jsx b/src/Card/tests/CardDeck.test.jsx
new file mode 100644
index 0000000000..d6740ff675
--- /dev/null
+++ b/src/Card/tests/CardDeck.test.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { v4 as uuidv4 } from 'uuid';
+import CardDeck from '../CardDeck';
+import Card from '../index';
+
+function ExampleCard(props) {
+ return (
+
+
+
+ Card title
+
+ This is a wider card with supporting text below as a natural lead-in to
+ additional content. This card has even longer content than the first to
+ show that equal height action.
+
+
+ Last updated 3 mins ago} />
+
+ );
+}
+
+function getCardContent({ cardCount = 5, ...cardProps } = {}) {
+ return Array.from({ length: cardCount }).map(() => );
+}
+
+describe('', () => {
+ it('renders default columnSizes', () => {
+ const cardContent = getCardContent();
+ const tree = renderer.create((
+
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders with controlled columnSizes', () => {
+ const cardContent = getCardContent();
+ const tree = renderer.create((
+
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('has tabIndex="-1" when `hasInteractiveChildren` is true', () => {
+ const cardContent = getCardContent({ isClickable: true });
+ const tree = renderer.create((
+
+ {cardContent}
+
+ )).toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/Card/tests/CardGrid.test.jsx b/src/Card/tests/CardGrid.test.jsx
index 65b8b0afe6..2331e892b3 100644
--- a/src/Card/tests/CardGrid.test.jsx
+++ b/src/Card/tests/CardGrid.test.jsx
@@ -40,6 +40,7 @@ describe('', () => {
xs: 12,
md: 6,
lg: 4,
+ xl: 3,
}}
>
{cardContent}
diff --git a/src/Card/tests/CardImageCap.test.jsx b/src/Card/tests/CardImageCap.test.jsx
index 36d942ed06..d9b49dd51e 100644
--- a/src/Card/tests/CardImageCap.test.jsx
+++ b/src/Card/tests/CardImageCap.test.jsx
@@ -92,12 +92,34 @@ describe('', () => {
);
const srcImg = screen.getByAltText('Src alt text');
expect(srcImg.src).toEqual('http://src.image/');
+ fireEvent.load(srcImg);
fireEvent.error(srcImg);
expect(srcImg.src).toEqual('http://src.image.fallback/');
const logoImg = screen.getByAltText('Logo alt text');
expect(logoImg.src).toEqual('http://logo.image/');
+ fireEvent.load(srcImg);
fireEvent.error(logoImg);
expect(logoImg.src).toEqual('http://logo.image.fallback/');
});
+
+ it('hiding component if it isn`t fallbackLogoSrc and logoSrc don`t work', () => {
+ render();
+
+ const logoImg = screen.getByAltText('Logo alt text');
+ fireEvent.load(logoImg);
+ expect(logoImg.className).toEqual('pgn__card-logo-cap show');
+ fireEvent.error(logoImg);
+ expect(logoImg.className).toEqual('pgn__card-logo-cap');
+ });
+
+ it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
+ render();
+
+ const srcImg = screen.getByAltText('Src alt text');
+ fireEvent.load(srcImg);
+ fireEvent.error(srcImg);
+ // test-file-stub is what our fileMock.js returns for all images
+ expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
+ });
});
diff --git a/src/Card/tests/CardStatus.test.jsx b/src/Card/tests/CardStatus.test.jsx
index 2d917ed488..a65ed5b496 100644
--- a/src/Card/tests/CardStatus.test.jsx
+++ b/src/Card/tests/CardStatus.test.jsx
@@ -18,17 +18,17 @@ describe('correct rendering', () => {
});
it('renders body with custom className', () => {
const className = 'my-class-name';
- const status = mount();
+ const status = mount(Text);
expect(status.find('.my-class-name').length).toBeGreaterThan(0);
});
it('renders with correct variant', () => {
- const variant = 'dark';
- const status = mount();
- expect(status.find('.pgn__card-status__dark').length).toBeGreaterThan(0);
+ const variant = 'primary';
+ const status = mount(Text);
+ expect(status.find('.pgn__card-status__primary').length).toBeGreaterThan(0);
});
it('renders with icon', () => {
const icon = WarningFilled;
- const status = mount();
+ const status = mount(Text);
expect(status.find('.pgn__icon').length).toBeGreaterThan(0);
});
});
diff --git a/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap b/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap
new file mode 100644
index 0000000000..068a29a98a
--- /dev/null
+++ b/src/Card/tests/__snapshots__/CardDeck.test.jsx.snap
@@ -0,0 +1,757 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` has tabIndex="-1" when \`hasInteractiveChildren\` is true 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
+
+
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
@@ -85,6 +88,8 @@ Chip.propTypes = {
* `import { Check } from '@edx/paragon/icons';`
*/
iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ /** A click handler for the `Chip` icon before. */
+ onIconBeforeClick: PropTypes.func,
/**
* An icon component to render before after the content.
* Example import of a Paragon icon component:
@@ -102,7 +107,6 @@ Chip.defaultProps = {
disabled: false,
iconBefore: undefined,
iconAfter: undefined,
- onLabelClick: undefined,
onIconBeforeClick: undefined,
onIconAfterClick: undefined,
};
diff --git a/src/DataTable/CardView.jsx b/src/DataTable/CardView.jsx
index d5dcb7be6c..75955ec725 100644
--- a/src/DataTable/CardView.jsx
+++ b/src/DataTable/CardView.jsx
@@ -1,44 +1,137 @@
-import React from 'react';
+import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import { v4 as uuidv4 } from 'uuid';
+import DataTableContext from './DataTableContext';
import { useRows } from './hooks';
-import { CardGrid } from '..';
+import { selectColumn } from './utils/getVisibleColumns';
+import { CardGrid, Card } from '..';
+
+function CardItem({
+ row,
+ prepareRow,
+ isSelectable,
+ SelectionComponent,
+ CardComponent,
+ selectionPlacement,
+}) {
+ prepareRow(row);
+ const { isSelected } = row;
+
+ if (isSelectable && SelectionComponent) {
+ return (
+
+
+
+
+ );
+ }
+
+ return ;
+}
+
+function DefaultSkeletonCardComponent() {
+ return (
+
+
+
+
+
+ );
+}
+
+export const DEFAULT_SKELETON_CARD_COUNT = 8;
function CardView({
- columnSizes, CardComponent, className,
+ columnSizes,
+ CardComponent,
+ className,
+ selectionPlacement,
+ SkeletonCardComponent = DefaultSkeletonCardComponent,
+ skeletonCardCount,
}) {
const {
getTableProps, prepareRow, displayRows,
} = useRows();
+ const {
+ isSelectable,
+ manualSelectColumn,
+ isLoading,
+ } = useContext(DataTableContext);
- const renderCards = () => displayRows.map((row) => {
- prepareRow(row);
- return (
-
- );
- });
+ // use the same component for card selection that is used for row selection
+ // otherwise view switching might break if row selection uses component that supports backend filtering / sorting
+ const SelectionComponent = manualSelectColumn?.Cell || selectColumn.Cell;
if (!getTableProps) {
return null;
}
+ if (isLoading) {
+ return (
+
+ {[...new Array(skeletonCardCount)].map(() => )}
+
+ );
+ }
+
return (
- {renderCards()}
+ {displayRows.map((row) => (
+
+ ))}
);
}
+CardItem.defaultProps = {
+ SelectionComponent: undefined,
+};
+
+CardItem.propTypes = {
+ row: PropTypes.shape({
+ getToggleRowSelectedProps: PropTypes.func,
+ isSelected: PropTypes.bool,
+ }).isRequired,
+ prepareRow: PropTypes.func.isRequired,
+ isSelectable: PropTypes.bool.isRequired,
+ CardComponent: PropTypes.func.isRequired,
+ SelectionComponent: PropTypes.func,
+ selectionPlacement: PropTypes.oneOf(['right', 'left']).isRequired,
+};
+
CardView.defaultProps = {
columnSizes: {
xs: 12,
lg: 6,
xl: 4,
},
- className: '',
+ className: undefined,
+ selectionPlacement: 'right',
+ SkeletonCardComponent: undefined,
+ skeletonCardCount: 8,
};
CardView.propTypes = {
@@ -58,6 +151,12 @@ CardView.propTypes = {
/** Your card component must be individualized to your table.
* It will be called with props from the "row" of data it will display */
CardComponent: PropTypes.func.isRequired,
+ /** If the Cards are selectable this prop determines from which side of the Card to show selection component. */
+ selectionPlacement: PropTypes.oneOf(['left', 'right']),
+ /** Overrides default skeleton card component for loading state in CardView */
+ SkeletonCardComponent: PropTypes.func,
+ /** Customize the number of loading skeleton cards to display in CardView */
+ skeletonCardCount: PropTypes.number,
};
export default CardView;
diff --git a/src/DataTable/DataTable.scss b/src/DataTable/DataTable.scss
index 818cbb633f..c0f89c54c6 100644
--- a/src/DataTable/DataTable.scss
+++ b/src/DataTable/DataTable.scss
@@ -252,6 +252,10 @@
.pgn__data-table-card-view {
padding: 0 $data-table-padding-x;
+
+ .pgn__data-table-card-view-default-skeleton-card-section {
+ margin-top: map_get($spacers, 2);
+ }
}
.pgn__data-table__action-btn {
@@ -276,3 +280,40 @@
box-shadow: $level-1-box-shadow;
border-radius: 4px;
}
+
+.pgn__data-table__selectable-card {
+ display: flex;
+ align-items: flex-start;
+ flex-grow: 1;
+
+ > :first-child {
+ height: 100%; // ensure Card stretches full height of column
+ }
+
+ &.is-selected {
+ > :first-child {
+ @extend %pgn__card-focused;
+ }
+ }
+
+ &.selection-right {
+ > :first-child {
+ margin-right: map_get($spacers, 2);
+
+ [dir="rtl"] & {
+ margin-left: map_get($spacers, 2);
+ margin-right: 0;
+ }
+ }
+ }
+
+ &.selection-left {
+ flex-direction: row-reverse;
+ }
+}
+
+.pgn__data-table__controlled-select {
+ display: flex;
+ align-content: center;
+ padding: map_get($spacers, 1);
+}
diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index c8a7420f14..e54f70805b 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -51,6 +51,11 @@ for more information.
```jsx live
{
const [currentView, setCurrentView] = useState('card');
const togglePlacement = 'left'; // 'bottom' is the only other supported value
+
+ const ExampleCard = ({ className, original }) => {
+ const { name, color, famous_for: famousFor } = original;
+
+ return (
+
+
+
+
+
+
Color
+
{color}
+
Famous For
+
{famousFor}
+
+
+
+ );
+ };
+
// memoize data, otherwise the filters will get reset after switching view
const data = useMemo(() => [
{
@@ -335,6 +360,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
return (
setCurrentView(val),
@@ -342,13 +368,12 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
}}
isSortable
defaultColumnValues={{ Filter: TextFilter }}
- itemCount={7}
+ itemCount={3}
data={data}
columns={[
{
Header: 'Name',
accessor: 'name',
-
},
{
Header: 'Famous For',
@@ -385,7 +410,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
{/* which kind of body content to show */}
- { currentView === "card" && }
+ { currentView === "card" && }
{ currentView === "list" && }
@@ -1039,6 +1064,166 @@ a responsive grid of cards.
};
```
+### Customizing number of Cards shown per row
+Use `columnSizes` prop of `CardView` component to define how many `Cards` are shown per row at each breakpoint.
+
+`columnSizes` is an object containing the desired column size at each breakpoint. The example below shows 1 `Card` per row at `xs` breakpoint, 2 `Cards` at `sm` and `md`, and 4 `Cards` at `lg` and higher. You can read more about the API at https://react-bootstrap.netlify.app/layout/grid/.
+
+```jsx live
+() => {
+ const columnSizes = { xs: 12, sm: 6, lg: 3 };
+
+ const ExampleCard = ({ className, original }) => {
+ const { name, color, famous_for: famousFor } = original;
+
+ return (
+
+
+
+
+
+
+
Color
+
{color}
+
Famous For
+
{famousFor}
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+```
+
+### Horizontal view
+You can also display `Cards` with horizontal view. If the table is selectable control position of selection checkbox with `selectionPlacement` prop, accepts `right` or `left` positions (relative to the `Card`).
+
+```jsx live
+() => {
+ const columnSizes = { xs: 12 };
+
+ const ExampleCard = ({ className, original }) => {
+ const { name, color, famous_for: famousFor } = original;
+
+ return (
+
+
+
+
+
+
+ 
handleSrcFallback(event, fallbackSrc)}
- alt={srcAlt}
- />
+ {!!src && (
+ 
handleSrcFallback(event, fallbackLogoSrc)}
+ onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
+ onLoad={() => setShowLogoCap(true)}
alt={logoAlt}
/>
)}
@@ -100,7 +116,7 @@ CardImageCap.propTypes = {
CardImageCap.defaultProps = {
src: undefined,
- fallbackSrc: undefined,
+ fallbackSrc: cardSrcFallbackImg,
logoSrc: undefined,
fallbackLogoSrc: undefined,
className: undefined,
diff --git a/src/Card/CardSection.jsx b/src/Card/CardSection.jsx
index 210d53832d..d5cc2c35a7 100644
--- a/src/Card/CardSection.jsx
+++ b/src/Card/CardSection.jsx
@@ -45,7 +45,7 @@ CardSection.propTypes = {
/** Specifies class name to append to the base element. */
className: PropTypes.string,
/** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
+ children: PropTypes.node,
/** Specifies title of the `Section`. */
title: PropTypes.node,
/** Specifies node to render on the bottom right of the `Section` (i.e. `ActionRow`). */
@@ -59,6 +59,7 @@ CardSection.propTypes = {
};
CardSection.defaultProps = {
+ children: null,
className: undefined,
title: undefined,
actions: undefined,
diff --git a/src/Card/README.md b/src/Card/README.md
index 220a0a1424..6e2fb3ec7d 100644
--- a/src/Card/README.md
+++ b/src/Card/README.md
@@ -35,7 +35,7 @@ This component uses a `Card` from react-bootstrap as a base component and extend
return (
@@ -51,7 +51,7 @@ notes: |
diff --git a/src/Chip/Chip.scss b/src/Chip/Chip.scss
index da83f732f9..664d6cfb72 100644
--- a/src/Chip/Chip.scss
+++ b/src/Chip/Chip.scss
@@ -5,7 +5,6 @@
border-radius: $chip-border-radius;
display: inline-flex;
margin: $chip-margin;
- min-width: 0;
box-sizing: border-box;
.pgn__chip__label {
diff --git a/src/Chip/README.md b/src/Chip/README.md
index 7417825f61..9984b440fd 100644
--- a/src/Chip/README.md
+++ b/src/Chip/README.md
@@ -7,7 +7,7 @@ categories:
- Buttonlike
status: 'New'
designStatus: 'Done'
-devStatus: 'In progress'
+devStatus: 'Done'
notes: |
---
@@ -23,7 +23,7 @@ notes: |
```
-## With icon before and after
+## With Icon Before and After
```jsx live