@openedx/paragon 21.12.2 → 21.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,11 +1,11 @@
1
1
  # Paragon
2
2
 
3
3
  [![Build Status](https://github.com/openedx/paragon/actions/workflows/release.yml/badge.svg)](https://github.com/openedx/paragon/actions/workflows/release.yml)
4
- [![npm_version](https://img.shields.io/npm/v/@edx/paragon.svg)](@edx/paragon)
4
+ [![npm_version](https://img.shields.io/npm/v/@openedx/paragon.svg)](@openedx/paragon)
5
5
  ![status](https://img.shields.io/badge/status-Maintained-brightgreen)
6
6
  ![license](https://img.shields.io/github/license/openedx/paragon.svg)
7
7
  [![codecov](https://codecov.io/gh/edx/paragon/branch/master/graph/badge.svg?token=x1tZmNduy9)](https://codecov.io/gh/edx/paragon)
8
- [![NPM downloads](https://img.shields.io/npm/dw/@edx/paragon)](https://www.npmjs.com/package/@edx/paragon)
8
+ [![NPM downloads](https://img.shields.io/npm/dw/@openedx/paragon)](https://www.npmjs.com/package/@openedx/paragon)
9
9
 
10
10
  ## Purpose
11
11
 
@@ -30,13 +30,13 @@ Paragon components require React 16 or higher. To install Paragon into your proj
30
30
  In terminal:
31
31
 
32
32
  ```
33
- npm i --save @edx/paragon
33
+ npm i --save @openedx/paragon
34
34
  ```
35
35
 
36
36
  In your React project:
37
37
 
38
38
  ```
39
- import { ComponentName } from '@edx/paragon';
39
+ import { ComponentName } from '@openedx/paragon';
40
40
  ```
41
41
 
42
42
  #### SCSS Foundation
@@ -47,7 +47,7 @@ Usage for Open edX and others:
47
47
 
48
48
  ```
49
49
  // ... Any custom SCSS variables should be defined here
50
- @import '~@edx/paragon/scss/core/core.scss';
50
+ @import '~@openedx/paragon/scss/core/core.scss';
51
51
  ```
52
52
 
53
53
  Usage on with `@edx/brand`:
@@ -57,7 +57,7 @@ Usage on with `@edx/brand`:
57
57
  ```
58
58
  @import '~@edx/brand/paragon/fonts.scss';
59
59
  @import '~@edx/brand/paragon/variables.scss';
60
- @import '~@edx/paragon/scss/core/core.scss';
60
+ @import '~@openedx/paragon/scss/core/core.scss';
61
61
  @import '~@edx/brand/paragon/overrides.scss';
62
62
  ```
63
63
 
@@ -81,7 +81,7 @@ Due to Paragon's dependence on ``react-intl``, that means that your whole app ne
81
81
 
82
82
  ```javascript
83
83
  import { IntlProvider } from 'react-intl';
84
- import { messages as paragonMessages } from '@edx/paragon';
84
+ import { messages as paragonMessages } from '@openedx/paragon';
85
85
 
86
86
  ReactDOM.render(
87
87
  <IntlProvider locale={usersLocale} messages={paragonMessages[usersLocale]}>
@@ -96,7 +96,7 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
96
96
  ```javascript
97
97
  import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
98
98
  import { AppProvider } from '@edx/frontend-platform/react';
99
- import { messages as paragonMessages } from '@edx/paragon';
99
+ import { messages as paragonMessages } from '@openedx/paragon';
100
100
  import App from './App';
101
101
  // this is your app's i18n messages
102
102
  import appMessages from './i18n';
@@ -148,17 +148,17 @@ module.exports = {
148
148
  dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
149
149
  */
150
150
  localModules: [
151
- { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
152
- { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
151
+ { moduleName: '@openedx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
152
+ { moduleName: '@openedx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
153
153
  // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
154
154
  // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
155
155
  // To avoid doing that you can use dist: 'src' to get any local changes hot reloaded on save in the MFE.
156
- { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
156
+ { moduleName: '@openedx/paragon', dir: '../src/paragon', dist: 'dist' },
157
157
  ],
158
158
  };
159
159
  ```
160
160
 
161
- 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";`
161
+ 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 "~@openedx/paragon/scss/core";`
162
162
 
163
163
  #### Internationalization
164
164
 
@@ -227,7 +227,8 @@ When developing a new component you should generally follow three rules:
227
227
  variant="primary"
228
228
  />
229
229
  )
230
-
230
+ }
231
+
231
232
  export default MyFunctionComponent;
232
233
  ```
233
234
 
@@ -475,4 +476,4 @@ The assigned maintainers for this component and other project details may be fou
475
476
  ## Reporting Security Issues
476
477
  Please do not report security issues in public. Please email security@openedx.org.
477
478
 
478
- We tend to prioritize security issues which impact the published `@edx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
479
+ We tend to prioritize security issues which impact the published `@openedx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
@@ -3,6 +3,7 @@ const chalk = require('chalk');
3
3
  const themeCommand = require('../lib/install-theme');
4
4
  const helpCommand = require('../lib/help');
5
5
  const versionCommand = require('../lib/version');
6
+ const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
6
7
 
7
8
  const HELP_COMMAND = 'help';
8
9
  const commandAliases = {
@@ -48,6 +49,17 @@ const COMMANDS = {
48
49
  },
49
50
  ],
50
51
  },
52
+ 'migrate-to-openedx-scope': {
53
+ executor: migrateToOpenEdxScopeCommand,
54
+ description: 'CLI for migrate from "@edx/paragon" to "@openedx/paragon".',
55
+ parameters: [
56
+ {
57
+ name: 'path',
58
+ description: 'Path to the directory where to replace Paragon package name, default to root of the repository',
59
+ required: false,
60
+ },
61
+ ],
62
+ },
51
63
  help: {
52
64
  executor: helpCommand,
53
65
  description: 'Displays help for available commands.',
@@ -59,10 +59,10 @@ Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
59
59
  * */
60
60
  variant: PropTypes.string,
61
61
  /** An icon component to render.
62
- * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
62
+ * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
63
63
  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
64
64
  /** An icon component to render.
65
- * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
65
+ * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
66
66
  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
67
67
  });
68
68
  Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","ButtonDeprecated","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","Deprecated","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\nimport ButtonDeprecated from './deprecated';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n children,\n iconAfter,\n iconBefore,\n ...props\n}, ref) => (\n <BaseButton\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n ...Button.propTypes,\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */\n iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */\n iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\nButton.Deprecated = ButtonDeprecated;\n\nfunction ButtonGroup(props) {\n return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","ButtonDeprecated","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","Deprecated","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\nimport ButtonDeprecated from './deprecated';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n children,\n iconAfter,\n iconBefore,\n ...props\n}, ref) => (\n <BaseButton\n {...props}\n className={classNames(props.className)}\n ref={ref}\n >\n {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n {children}\n {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n </BaseButton>\n));\n\nButton.propTypes = {\n ...Button.propTypes,\n /** Specifies class name to apply to the button */\n className: PropTypes.string,\n /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n disabled: PropTypes.bool,\n /** Specifies the text that is displayed within the button. */\n children: PropTypes.node.isRequired,\n /** A function that would specify what the button should do when the `onClick` event is triggered.\n * For example, the button could launch a `Modal`. The default is an empty function. */\n onClick: PropTypes.func,\n /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n * For example, this could handle using the `Escape` key to trigger the button's action.\n * The default is an empty function. */\n onKeyDown: PropTypes.func,\n /** Used to set the `type` attribute on the `button` tag. The default type is `button`. */\n type: PropTypes.string,\n /** Specifies variant to use.\n * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n * `light`, `link`\n *\n * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n * or `inverse-outline-`)\n * */\n variant: PropTypes.string,\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n /** An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n ...Button.defaultProps,\n children: undefined,\n className: undefined,\n iconBefore: undefined,\n iconAfter: undefined,\n disabled: false,\n};\n\nButton.Deprecated = ButtonDeprecated;\n\nfunction ButtonGroup(props) {\n return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n /** Specifies element type for this component. */\n as: PropTypes.elementType,\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Specifies the size for all Buttons in the group. */\n size: PropTypes.oneOf(['sm', 'md', 'lg']),\n /** Display as a button toggle group. */\n toggle: PropTypes.bool,\n /** Specifies if the set of Buttons should appear vertically stacked. */\n vertical: PropTypes.bool,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n as: 'div',\n role: 'group',\n toggle: false,\n vertical: false,\n bsPrefix: 'btn-group',\n size: 'md',\n};\n\nButtonToolbar.propTypes = {\n /** An ARIA role describing the button group. */\n role: PropTypes.string,\n /** Overrides underlying component base CSS class name */\n bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n role: 'toolbar',\n bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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"}
@@ -59,7 +59,7 @@ Chip.propTypes = {
59
59
  * An icon component to render before the content.
60
60
  * Example import of a Paragon icon component:
61
61
  *
62
- * `import { Check } from '@edx/paragon/icons';`
62
+ * `import { Check } from '@openedx/paragon/icons';`
63
63
  */
64
64
  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
65
65
  /** A click handler for the `Chip` icon before. */
@@ -68,7 +68,7 @@ Chip.propTypes = {
68
68
  * An icon component to render before after the content.
69
69
  * Example import of a Paragon icon component:
70
70
  *
71
- * `import { Check } from '@edx/paragon/icons';`
71
+ * `import { Check } from '@openedx/paragon/icons';`
72
72
  */
73
73
  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
74
74
  /** A click handler for the `Chip` icon after. */
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","STYLE_VARIANTS","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconAfter","onIconBeforeClick","onIconAfterClick","disabled","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","src","active","role","onClick","onKeyPress","tabIndex","propTypes","node","isRequired","string","oneOf","bool","oneOfType","element","func","defaultProps","undefined"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n 'light',\n 'dark',\n];\n\nexport interface IChip {\n children: React.ReactNode,\n className?: string,\n variant?: string,\n iconBefore?: React.ReactElement | Function,\n iconAfter?: React.ReactElement | Function,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n}\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconAfter,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled },\n )}\n ref={ref}\n {...props}\n >\n {iconBefore && (\n <div\n className={classNames('pgn__chip__icon-before')}\n >\n <Icon src={iconBefore} />\n </div>\n )}\n <div\n className={classNames('pgn__chip__label', {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <div\n className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}\n role=\"button\"\n onClick={onIconAfterClick}\n onKeyPress={onIconAfterClick}\n tabIndex={disabled ? -1 : 0}\n data-testid=\"icon-after\"\n >\n <Icon src={iconAfter} />\n </div>\n )}\n </div>\n));\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(STYLE_VARIANTS),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@edx/paragon/icons';`\n */\n iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@edx/paragon/icons';`\n */\n iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: 'light',\n disabled: false,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","STYLE_VARIANTS","CHIP_PGN_CLASS","Chip","forwardRef","_ref","ref","children","className","variant","iconBefore","iconAfter","onIconBeforeClick","onIconAfterClick","disabled","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","src","active","role","onClick","onKeyPress","tabIndex","propTypes","node","isRequired","string","oneOf","bool","oneOfType","element","func","defaultProps","undefined"],"sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n// @ts-ignore\nimport Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n 'light',\n 'dark',\n];\n\nexport interface IChip {\n children: React.ReactNode,\n className?: string,\n variant?: string,\n iconBefore?: React.ReactElement | Function,\n iconAfter?: React.ReactElement | Function,\n onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,\n onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,\n disabled?: boolean,\n}\n\nexport const CHIP_PGN_CLASS = 'pgn__chip';\n\nconst Chip = React.forwardRef(({\n children,\n className,\n variant,\n iconBefore,\n iconAfter,\n onIconBeforeClick,\n onIconAfterClick,\n disabled,\n ...props\n}: IChip, ref: ForwardedRef<HTMLDivElement>) => (\n <div\n className={classNames(\n CHIP_PGN_CLASS,\n `pgn__chip-${variant}`,\n className,\n { disabled },\n )}\n ref={ref}\n {...props}\n >\n {iconBefore && (\n <div\n className={classNames('pgn__chip__icon-before')}\n >\n <Icon src={iconBefore} />\n </div>\n )}\n <div\n className={classNames('pgn__chip__label', {\n 'p-before': iconBefore,\n 'p-after': iconAfter,\n })}\n >\n {children}\n </div>\n {iconAfter && (\n <div\n className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}\n role=\"button\"\n onClick={onIconAfterClick}\n onKeyPress={onIconAfterClick}\n tabIndex={disabled ? -1 : 0}\n data-testid=\"icon-after\"\n >\n <Icon src={iconAfter} />\n </div>\n )}\n </div>\n));\n\nChip.propTypes = {\n /** Specifies the content of the `Chip`. */\n children: PropTypes.node.isRequired,\n /** Specifies an additional `className` to add to the base element. */\n className: PropTypes.string,\n /** The `Chip` style variant to use. */\n variant: PropTypes.oneOf(STYLE_VARIANTS),\n /** Disables the `Chip`. */\n disabled: PropTypes.bool,\n /**\n * An icon component to render before the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** A click handler for the `Chip` icon before. */\n onIconBeforeClick: PropTypes.func,\n /**\n * An icon component to render before after the content.\n * Example import of a Paragon icon component:\n *\n * `import { Check } from '@openedx/paragon/icons';`\n */\n iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n /** A click handler for the `Chip` icon after. */\n onIconAfterClick: PropTypes.func,\n};\n\nChip.defaultProps = {\n className: undefined,\n variant: 'light',\n disabled: false,\n iconBefore: undefined,\n iconAfter: undefined,\n onIconBeforeClick: undefined,\n onIconAfterClick: undefined,\n};\n\nexport default Chip;\n"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  $data-table-background-color: $white !default;
2
- $data-table-border: 1px solid $gray-200 !default;
2
+ $data-table-border: 2px solid $light-300 !default;
3
3
  $data-table-box-shadow: $box-shadow-sm !default;
4
4
  $data-table-padding-x: .75rem !default;
5
5
  $data-table-padding-y: .75rem !default;
@@ -59,7 +59,7 @@ function Icon(_ref) {
59
59
  Icon.propTypes = {
60
60
  /**
61
61
  * An icon component to render.
62
- * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
62
+ * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
63
63
  */
64
64
  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
65
65
  /** HTML element attributes to pass through to the underlying svg element */
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n src: Component,\n id,\n className,\n hidden,\n screenReaderText,\n svgAttrs,\n size,\n ...attrs\n}) {\n if (Component) {\n // If no aria label is specified, hide this icon from screenreaders\n const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n const mergedSvgProps = { ...svgAttrs };\n\n if (!hasAriaLabel) {\n mergedSvgProps['aria-label'] = undefined;\n mergedSvgProps['aria-hidden'] = true;\n }\n\n return (\n <span\n className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n id={id}\n {...attrs}\n >\n <Component\n role=\"img\"\n focusable={false}\n {...mergedSvgProps}\n />\n {screenReaderText && (\n <span className=\"sr-only\">\n {screenReaderText}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <>\n <span\n id={id || newId('Icon')}\n className={className}\n aria-hidden={hidden}\n />\n {screenReaderText && (\n <span className=\"sr-only\">\n {screenReaderText}\n </span>\n )}\n </>\n );\n}\n\nIcon.propTypes = {\n /**\n * An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`\n */\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n /** HTML element attributes to pass through to the underlying svg element */\n svgAttrs: PropTypes.shape({\n 'aria-label': PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n }),\n /**\n * the `id` property of the Icon element, by default this value is generated\n * with the `newId` function with the `prefix` of `Icon`.\n */\n id: PropTypes.string,\n /** The size of the icon. */\n size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n /** A class name that will define what the Icon looks like. */\n className: PropTypes.string,\n /**\n * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n * this value is `true` by default.\n */\n hidden: PropTypes.bool,\n /**\n * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n */\n screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n src: null,\n svgAttrs: {},\n id: undefined,\n hidden: true,\n screenReaderText: undefined,\n size: undefined,\n className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n src: Component,\n id,\n className,\n hidden,\n screenReaderText,\n svgAttrs,\n size,\n ...attrs\n}) {\n if (Component) {\n // If no aria label is specified, hide this icon from screenreaders\n const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n const mergedSvgProps = { ...svgAttrs };\n\n if (!hasAriaLabel) {\n mergedSvgProps['aria-label'] = undefined;\n mergedSvgProps['aria-hidden'] = true;\n }\n\n return (\n <span\n className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n id={id}\n {...attrs}\n >\n <Component\n role=\"img\"\n focusable={false}\n {...mergedSvgProps}\n />\n {screenReaderText && (\n <span className=\"sr-only\">\n {screenReaderText}\n </span>\n )}\n </span>\n );\n }\n\n return (\n <>\n <span\n id={id || newId('Icon')}\n className={className}\n aria-hidden={hidden}\n />\n {screenReaderText && (\n <span className=\"sr-only\">\n {screenReaderText}\n </span>\n )}\n </>\n );\n}\n\nIcon.propTypes = {\n /**\n * An icon component to render.\n * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n */\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n /** HTML element attributes to pass through to the underlying svg element */\n svgAttrs: PropTypes.shape({\n 'aria-label': PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n }),\n /**\n * the `id` property of the Icon element, by default this value is generated\n * with the `newId` function with the `prefix` of `Icon`.\n */\n id: PropTypes.string,\n /** The size of the icon. */\n size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n /** A class name that will define what the Icon looks like. */\n className: PropTypes.string,\n /**\n * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n * this value is `true` by default.\n */\n hidden: PropTypes.bool,\n /**\n * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n */\n screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n src: null,\n svgAttrs: {},\n id: undefined,\n hidden: true,\n screenReaderText: undefined,\n size: undefined,\n className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n className: {\n deprType: DeprTypes.FORMAT,\n expect: value => typeof value === 'string',\n transform: value => (Array.isArray(value) ? value.join(' ') : value),\n message: 'It should be a string.',\n },\n});\n"],"mappings":"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"}
@@ -67,7 +67,7 @@ IconButton.propTypes = {
67
67
  * but is going to be deprecated soon, please use Paragon's icons instead. */
68
68
  iconAs: PropTypes.elementType,
69
69
  /** An icon component to render. Example import of a Paragon icon component:
70
- * `import { Check } from '@edx/paragon/dist/icon';`
70
+ * `import { Check } from '@openedx/paragon/dist/icon';`
71
71
  * */
72
72
  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
73
73
  /** Alt text for your icon. For best practice, avoid using alt text to describe
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n className,\n alt,\n invertColors,\n icon,\n src,\n iconClassNames,\n onClick,\n size,\n variant,\n iconAs,\n isActive,\n ...attrs\n}, ref) => {\n const invert = invertColors ? 'inverse-' : '';\n const activeStyle = isActive ? `${variant}-` : '';\n if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n // eslint-disable-next-line no-console\n console.warn(msg);\n }\n const IconComponent = iconAs || FontAwesomeIcon;\n return (\n <button\n aria-label={alt}\n className={classNames(\n 'btn-icon',\n `btn-icon-${invert}${variant}`,\n `btn-icon-${size}`,\n {\n [`btn-icon-${invert}${activeStyle}active`]: isActive,\n },\n className,\n )}\n onClick={onClick}\n type=\"button\"\n ref={ref}\n {...attrs}\n >\n <span className=\"btn-icon__icon-container\">\n <IconComponent\n className={classNames('btn-icon__icon', iconClassNames)}\n icon={icon}\n src={src}\n />\n </span>\n </button>\n );\n});\n\nIconButton.defaultProps = {\n iconAs: undefined,\n src: null,\n icon: undefined,\n iconClassNames: undefined,\n className: undefined,\n invertColors: false,\n variant: 'primary',\n size: 'md',\n onClick: () => {},\n isActive: false,\n};\n\nIconButton.propTypes = {\n /** A custom class name. */\n className: PropTypes.string,\n /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n * but is going to be deprecated soon, please use Paragon's icons instead. */\n iconAs: PropTypes.elementType,\n /** An icon component to render. Example import of a Paragon icon component:\n * `import { Check } from '@edx/paragon/dist/icon';`\n * */\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n /** Alt text for your icon. For best practice, avoid using alt text to describe\n * the image in the `IconButton`. Instead, we recommend describing the function\n * of the button. */\n alt: PropTypes.string.isRequired,\n /** Changes icon styles for dark background */\n invertColors: PropTypes.bool,\n /** Accepts a React fontawesome icon. */\n icon: PropTypes.shape({\n prefix: PropTypes.string,\n iconName: PropTypes.string,\n // eslint-disable-next-line react/forbid-prop-types\n icon: PropTypes.array,\n }),\n /** Extra class names that will be added to the icon */\n iconClassNames: PropTypes.string,\n /** Click handler for the button */\n onClick: PropTypes.func,\n /** Type of button (uses Bootstrap options) */\n variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n /** size of button to render */\n size: PropTypes.oneOf(['sm', 'md', 'inline']),\n /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n const invert = invertColors ? 'inverse-' : '';\n return (\n <OverlayTrigger\n placement={tooltipPlacement}\n overlay={(\n <Tooltip\n id={`iconbutton-tooltip-${tooltipPlacement}`}\n variant={invert ? 'light' : ''}\n >\n {tooltipContent}\n </Tooltip>\n )}\n >\n <IconButton variant={variant} invertColors={invertColors} {...props} />\n </OverlayTrigger>\n );\n}\n\nIconButtonWithTooltip.defaultProps = {\n tooltipPlacement: 'top',\n variant: 'primary',\n invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options */\n tooltipPlacement: PropTypes.string,\n /** any valid JSX or text to be rendered as tooltip contents */\n tooltipContent: PropTypes.node.isRequired,\n /** Type of button (uses Bootstrap options) */\n variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n /** Changes icon styles for dark background */\n invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n className,\n alt,\n invertColors,\n icon,\n src,\n iconClassNames,\n onClick,\n size,\n variant,\n iconAs,\n isActive,\n ...attrs\n}, ref) => {\n const invert = invertColors ? 'inverse-' : '';\n const activeStyle = isActive ? `${variant}-` : '';\n if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n // eslint-disable-next-line no-console\n console.warn(msg);\n }\n const IconComponent = iconAs || FontAwesomeIcon;\n return (\n <button\n aria-label={alt}\n className={classNames(\n 'btn-icon',\n `btn-icon-${invert}${variant}`,\n `btn-icon-${size}`,\n {\n [`btn-icon-${invert}${activeStyle}active`]: isActive,\n },\n className,\n )}\n onClick={onClick}\n type=\"button\"\n ref={ref}\n {...attrs}\n >\n <span className=\"btn-icon__icon-container\">\n <IconComponent\n className={classNames('btn-icon__icon', iconClassNames)}\n icon={icon}\n src={src}\n />\n </span>\n </button>\n );\n});\n\nIconButton.defaultProps = {\n iconAs: undefined,\n src: null,\n icon: undefined,\n iconClassNames: undefined,\n className: undefined,\n invertColors: false,\n variant: 'primary',\n size: 'md',\n onClick: () => {},\n isActive: false,\n};\n\nIconButton.propTypes = {\n /** A custom class name. */\n className: PropTypes.string,\n /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n * but is going to be deprecated soon, please use Paragon's icons instead. */\n iconAs: PropTypes.elementType,\n /** An icon component to render. Example import of a Paragon icon component:\n * `import { Check } from '@openedx/paragon/dist/icon';`\n * */\n src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n /** Alt text for your icon. For best practice, avoid using alt text to describe\n * the image in the `IconButton`. Instead, we recommend describing the function\n * of the button. */\n alt: PropTypes.string.isRequired,\n /** Changes icon styles for dark background */\n invertColors: PropTypes.bool,\n /** Accepts a React fontawesome icon. */\n icon: PropTypes.shape({\n prefix: PropTypes.string,\n iconName: PropTypes.string,\n // eslint-disable-next-line react/forbid-prop-types\n icon: PropTypes.array,\n }),\n /** Extra class names that will be added to the icon */\n iconClassNames: PropTypes.string,\n /** Click handler for the button */\n onClick: PropTypes.func,\n /** Type of button (uses Bootstrap options) */\n variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n /** size of button to render */\n size: PropTypes.oneOf(['sm', 'md', 'inline']),\n /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n const invert = invertColors ? 'inverse-' : '';\n return (\n <OverlayTrigger\n placement={tooltipPlacement}\n overlay={(\n <Tooltip\n id={`iconbutton-tooltip-${tooltipPlacement}`}\n variant={invert ? 'light' : ''}\n >\n {tooltipContent}\n </Tooltip>\n )}\n >\n <IconButton variant={variant} invertColors={invertColors} {...props} />\n </OverlayTrigger>\n );\n}\n\nIconButtonWithTooltip.defaultProps = {\n tooltipPlacement: 'top',\n variant: 'primary',\n invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options */\n tooltipPlacement: PropTypes.string,\n /** any valid JSX or text to be rendered as tooltip contents */\n tooltipContent: PropTypes.node.isRequired,\n /** Type of button (uses Bootstrap options) */\n variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n /** Changes icon styles for dark background */\n invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}
@@ -3,6 +3,7 @@
3
3
 
4
4
  .pagination {
5
5
  align-items: center;
6
+ margin: 0;
6
7
 
7
8
  .dropdown {
8
9
  z-index: 4;
@@ -109,8 +109,8 @@ SearchField.propTypes = {
109
109
  *
110
110
  * ```jsx
111
111
  * {
112
- * submit: import {Search} from '@edx/paragon/icons';,
113
- * clear: import {Close} from '@edx/paragon/icons'.
112
+ * submit: import {Search} from '@openedx/paragon/icons';,
113
+ * clear: import {Close} from '@openedx/paragon/icons'.
114
114
  * }
115
115
  * ```
116
116
  */
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n 'light',\n 'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n 'internal',\n 'external',\n];\n\nfunction SearchField(props) {\n const {\n label,\n placeholder,\n inputProps,\n variant,\n submitButtonLocation,\n buttonText,\n ...others\n } = props;\n\n const Wrapper = useCallback(\n (wrapperProps) => (submitButtonLocation === 'external'\n ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n : wrapperProps.children),\n [submitButtonLocation],\n );\n\n return (\n <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n <Wrapper>\n <SearchField.Label>{label}</SearchField.Label>\n <SearchField.Input placeholder={placeholder} {...inputProps} />\n <SearchField.ClearButton />\n </Wrapper>\n <SearchField.SubmitButton\n variant={variant}\n submitButtonLocation={submitButtonLocation}\n buttonText={buttonText}\n />\n </SearchField.Advanced>\n );\n}\n\nSearchField.propTypes = {\n /**\n * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n *\n *```jsx\n * <SearchField onSubmit={(value) => { console.log(value); } />\n * ```\n */\n onSubmit: PropTypes.func.isRequired,\n /** Specifies the label to use for the input field (e.g., for i18n translations). */\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n /** Specifies a custom class name. */\n className: PropTypes.string,\n /**\n * Specifies a callback function for when the user loses focus in the\n * `SearchField` component. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onBlur={event => console.log(event)} />\n * ```\n */\n onBlur: PropTypes.func,\n /**\n * Specifies a callback function for when the value in `SearchField`\n * is changed by the user. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onChange={value => console.log(value)} />\n * ```\n */\n onChange: PropTypes.func,\n /**\n * Specifies a callback function for when the value in `SearchField`\n * is cleared by the user. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onClear={() => console.log('search cleared')} />\n * ```\n */\n onClear: PropTypes.func,\n /**\n * Specifies a callback function for when the user focuses in the `SearchField`\n * component. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onFocus={event => console.log(event)} />\n * ```\n */\n onFocus: PropTypes.func,\n /** Specifies the placeholder text for the input. */\n placeholder: PropTypes.string,\n /**\n * Specifies the screenreader text for both the clear and submit buttons\n * (e.g., for i18n translations). The default is `{ label: 'search',\n * clearButton: 'clear search', searchButton: 'submit search' }`.\n */\n screenReaderText: PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n }),\n /** Specifies the initial value for the input. The default is an empty string. */\n value: PropTypes.string,\n /**\n * Specifies the icon element(s) to use for the clear and submit buttons.\n * The default is:\n *\n * ```jsx\n * {\n * submit: import {Search} from '@edx/paragon/icons';,\n * clear: import {Close} from '@edx/paragon/icons'.\n * }\n * ```\n */\n icons: PropTypes.shape({\n submit: PropTypes.element.isRequired,\n clear: PropTypes.element,\n }),\n /**\n * Specifies the aria-label attribute on the form element.\n * This is useful if you use the `SearchField` component more than once on a page.\n */\n formAriaLabel: PropTypes.string,\n /** Props to be passed to the form input */\n inputProps: PropTypes.shape({}),\n /** The button style variant to use. */\n variant: PropTypes.oneOf(STYLE_VARIANTS),\n /** Specifies whether the `SearchField` is disabled. */\n disabled: PropTypes.bool,\n /** Controls whether the search button is internal as an icon or external as a button. */\n submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n /**\n * Specifies a text that is displayed on the button.\n * The `submitButtonLocation` prop should be set to `external`.\n */\n buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n label: undefined,\n placeholder: undefined,\n className: undefined,\n formAriaLabel: undefined,\n value: '',\n screenReaderText: {\n label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n },\n icons: {\n clear: <Icon src={Close} />,\n submit: <Icon src={Search} />,\n },\n onBlur: () => {},\n onChange: () => {},\n onFocus: () => {},\n onClear: () => {},\n inputProps: {},\n variant: 'light',\n disabled: false,\n submitButtonLocation: 'internal',\n buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,MAAM,EAAEC,KAAK,QAAQ,aAAa;AAC3C,OAAOC,mBAAmB,IAAIC,kBAAkB,QAAQ,uBAAuB;AAC/E,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,uBAAuB,MAAM,2BAA2B;AAE/D,OAAOC,IAAI,MAAM,SAAS;AAE1B,OAAO,IAAMC,qCAAqC,GAAG,QAAQ;AAC7D,OAAO,IAAMC,6CAA6C,GAAG,eAAe;AAC5E,OAAO,IAAMC,4CAA4C,GAAG,cAAc;AAC1E,OAAO,IAAMC,wBAAwB,GAAG,QAAQ;AAEhD,IAAMC,cAAc,GAAG,CACrB,OAAO,EACP,MAAM,CACP;AAED,IAAMC,wBAAwB,GAAG,CAC/B,UAAU,EACV,UAAU,CACX;AAED,SAASC,WAAWA,CAACC,KAAK,EAAE;EAC1B,IACEC,KAAK,GAOHD,KAAK,CAPPC,KAAK;IACLC,WAAW,GAMTF,KAAK,CANPE,WAAW;IACXC,UAAU,GAKRH,KAAK,CALPG,UAAU;IACVC,OAAO,GAILJ,KAAK,CAJPI,OAAO;IACPC,oBAAoB,GAGlBL,KAAK,CAHPK,oBAAoB;IACpBC,UAAU,GAERN,KAAK,CAFPM,UAAU;IACPC,MAAM,GAAAC,wBAAA,CACPR,KAAK,EAAAS,SAAA;EAET,IAAMC,OAAO,GAAG5B,WAAW,CACzB,UAAC6B,YAAY;IAAA,OAAMN,oBAAoB,KAAK,UAAU,gBAClDxB,KAAA,CAAA+B,aAAA;MAAKC,SAAS,EAAC;IAA0B,GAAEF,YAAY,CAACG,QAAc,CAAC,GACvEH,YAAY,CAACG,QAAQ;EAAA,CAAC,EAC1B,CAACT,oBAAoB,CACvB,CAAC;EAED,oBACExB,KAAA,CAAA+B,aAAA,CAACb,WAAW,CAACgB,QAAQ,EAAAC,QAAA,KAAKT,MAAM;IAAEF,oBAAoB,EAAEA;EAAqB,iBAC3ExB,KAAA,CAAA+B,aAAA,CAACF,OAAO,qBACN7B,KAAA,CAAA+B,aAAA,CAACb,WAAW,CAACkB,KAAK,QAAEhB,KAAyB,CAAC,eAC9CpB,KAAA,CAAA+B,aAAA,CAACb,WAAW,CAACmB,KAAK,EAAAF,QAAA;IAACd,WAAW,EAAEA;EAAY,GAAKC,UAAU,CAAG,CAAC,eAC/DtB,KAAA,CAAA+B,aAAA,CAACb,WAAW,CAACoB,WAAW,MAAE,CACnB,CAAC,eACVtC,KAAA,CAAA+B,aAAA,CAACb,WAAW,CAACqB,YAAY;IACvBhB,OAAO,EAAEA,OAAQ;IACjBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,UAAU,EAAEA;EAAW,CACxB,CACmB,CAAC;AAE3B;AAEAP,WAAW,CAACsB,SAAS,GAAG;EACtB;AACF;AACA;AACA;AACA;AACA;AACA;EACEC,QAAQ,EAAEvC,SAAS,CAACwC,IAAI,CAACC,UAAU;EACnC;EACAvB,KAAK,EAAElB,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,MAAM,EAAE3C,SAAS,CAAC4C,OAAO,CAAC,CAAC;EACjE;EACAd,SAAS,EAAE9B,SAAS,CAAC2C,MAAM;EAC3B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,MAAM,EAAE7C,SAAS,CAACwC,IAAI;EACtB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACEM,QAAQ,EAAE9C,SAAS,CAACwC,IAAI;EACxB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACEO,OAAO,EAAE/C,SAAS,CAACwC,IAAI;EACvB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;EACEQ,OAAO,EAAEhD,SAAS,CAACwC,IAAI;EACvB;EACArB,WAAW,EAAEnB,SAAS,CAAC2C,MAAM;EAC7B;AACF;AACA;AACA;AACA;EACEM,gBAAgB,EAAEjD,SAAS,CAACkD,KAAK,CAAC;IAChChC,KAAK,EAAElB,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,MAAM,EAAE3C,SAAS,CAAC4C,OAAO,CAAC,CAAC,CAACH,UAAU;IAC5EU,YAAY,EAAEnD,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,MAAM,EAAE3C,SAAS,CAAC4C,OAAO,CAAC,CAAC,CAACH,UAAU;IACnFW,WAAW,EAAEpD,SAAS,CAAC0C,SAAS,CAAC,CAAC1C,SAAS,CAAC2C,MAAM,EAAE3C,SAAS,CAAC4C,OAAO,CAAC;EACxE,CAAC,CAAC;EACF;EACAS,KAAK,EAAErD,SAAS,CAAC2C,MAAM;EACvB;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEW,KAAK,EAAEtD,SAAS,CAACkD,KAAK,CAAC;IACrBK,MAAM,EAAEvD,SAAS,CAAC4C,OAAO,CAACH,UAAU;IACpCe,KAAK,EAAExD,SAAS,CAAC4C;EACnB,CAAC,CAAC;EACF;AACF;AACA;AACA;EACEa,aAAa,EAAEzD,SAAS,CAAC2C,MAAM;EAC/B;EACAvB,UAAU,EAAEpB,SAAS,CAACkD,KAAK,CAAC,CAAC,CAAC,CAAC;EAC/B;EACA7B,OAAO,EAAErB,SAAS,CAAC0D,KAAK,CAAC5C,cAAc,CAAC;EACxC;EACA6C,QAAQ,EAAE3D,SAAS,CAAC4D,IAAI;EACxB;EACAtC,oBAAoB,EAAEtB,SAAS,CAAC0D,KAAK,CAAC3C,wBAAwB,CAAC;EAC/D;AACF;AACA;AACA;EACEQ,UAAU,EAAEvB,SAAS,CAAC2C;AACxB,CAAC;AAED3B,WAAW,CAAC6C,YAAY,GAAG;EACzB3C,KAAK,EAAE4C,SAAS;EAChB3C,WAAW,EAAE2C,SAAS;EACtBhC,SAAS,EAAEgC,SAAS;EACpBL,aAAa,EAAEK,SAAS;EACxBT,KAAK,EAAE,EAAE;EACTJ,gBAAgB,EAAE;IAChB/B,KAAK,EAAER,qCAAqC;IAC5CyC,YAAY,EAAExC,6CAA6C;IAC3DyC,WAAW,EAAExC;EACf,CAAC;EACD0C,KAAK,EAAE;IACLE,KAAK,eAAE1D,KAAA,CAAA+B,aAAA,CAACpB,IAAI;MAACsD,GAAG,EAAE7D;IAAM,CAAE,CAAC;IAC3BqD,MAAM,eAAEzD,KAAA,CAAA+B,aAAA,CAACpB,IAAI;MAACsD,GAAG,EAAE9D;IAAO,CAAE;EAC9B,CAAC;EACD4C,MAAM,EAAE,SAAAA,OAAA,EAAM,CAAC,CAAC;EAChBC,QAAQ,EAAE,SAAAA,SAAA,EAAM,CAAC,CAAC;EAClBE,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjBD,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjB3B,UAAU,EAAE,CAAC,CAAC;EACdC,OAAO,EAAE,OAAO;EAChBsC,QAAQ,EAAE,KAAK;EACfrC,oBAAoB,EAAE,UAAU;EAChCC,UAAU,EAAEV;AACd,CAAC;AAEDG,WAAW,CAACgB,QAAQ,GAAG7B,mBAAmB;AAC1Ca,WAAW,CAACkB,KAAK,GAAG7B,gBAAgB;AACpCW,WAAW,CAACmB,KAAK,GAAG7B,gBAAgB;AACpCU,WAAW,CAACoB,WAAW,GAAG7B,sBAAsB;AAChDS,WAAW,CAACqB,YAAY,GAAG7B,uBAAuB;AAClDQ,WAAW,CAACgD,OAAO,GAAG5D,kBAAkB;AAExC,eAAeY,WAAW"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n 'light',\n 'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n 'internal',\n 'external',\n];\n\nfunction SearchField(props) {\n const {\n label,\n placeholder,\n inputProps,\n variant,\n submitButtonLocation,\n buttonText,\n ...others\n } = props;\n\n const Wrapper = useCallback(\n (wrapperProps) => (submitButtonLocation === 'external'\n ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n : wrapperProps.children),\n [submitButtonLocation],\n );\n\n return (\n <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n <Wrapper>\n <SearchField.Label>{label}</SearchField.Label>\n <SearchField.Input placeholder={placeholder} {...inputProps} />\n <SearchField.ClearButton />\n </Wrapper>\n <SearchField.SubmitButton\n variant={variant}\n submitButtonLocation={submitButtonLocation}\n buttonText={buttonText}\n />\n </SearchField.Advanced>\n );\n}\n\nSearchField.propTypes = {\n /**\n * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n *\n *```jsx\n * <SearchField onSubmit={(value) => { console.log(value); } />\n * ```\n */\n onSubmit: PropTypes.func.isRequired,\n /** Specifies the label to use for the input field (e.g., for i18n translations). */\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n /** Specifies a custom class name. */\n className: PropTypes.string,\n /**\n * Specifies a callback function for when the user loses focus in the\n * `SearchField` component. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onBlur={event => console.log(event)} />\n * ```\n */\n onBlur: PropTypes.func,\n /**\n * Specifies a callback function for when the value in `SearchField`\n * is changed by the user. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onChange={value => console.log(value)} />\n * ```\n */\n onChange: PropTypes.func,\n /**\n * Specifies a callback function for when the value in `SearchField`\n * is cleared by the user. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onClear={() => console.log('search cleared')} />\n * ```\n */\n onClear: PropTypes.func,\n /**\n * Specifies a callback function for when the user focuses in the `SearchField`\n * component. The default is an empty function. For example:\n *\n * ```jsx\n * <SearchField onFocus={event => console.log(event)} />\n * ```\n */\n onFocus: PropTypes.func,\n /** Specifies the placeholder text for the input. */\n placeholder: PropTypes.string,\n /**\n * Specifies the screenreader text for both the clear and submit buttons\n * (e.g., for i18n translations). The default is `{ label: 'search',\n * clearButton: 'clear search', searchButton: 'submit search' }`.\n */\n screenReaderText: PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n }),\n /** Specifies the initial value for the input. The default is an empty string. */\n value: PropTypes.string,\n /**\n * Specifies the icon element(s) to use for the clear and submit buttons.\n * The default is:\n *\n * ```jsx\n * {\n * submit: import {Search} from '@openedx/paragon/icons';,\n * clear: import {Close} from '@openedx/paragon/icons'.\n * }\n * ```\n */\n icons: PropTypes.shape({\n submit: PropTypes.element.isRequired,\n clear: PropTypes.element,\n }),\n /**\n * Specifies the aria-label attribute on the form element.\n * This is useful if you use the `SearchField` component more than once on a page.\n */\n formAriaLabel: PropTypes.string,\n /** Props to be passed to the form input */\n inputProps: PropTypes.shape({}),\n /** The button style variant to use. */\n variant: PropTypes.oneOf(STYLE_VARIANTS),\n /** Specifies whether the `SearchField` is disabled. */\n disabled: PropTypes.bool,\n /** Controls whether the search button is internal as an icon or external as a button. */\n submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n /**\n * Specifies a text that is displayed on the button.\n * The `submitButtonLocation` prop should be set to `external`.\n */\n buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n label: undefined,\n placeholder: undefined,\n className: undefined,\n formAriaLabel: undefined,\n value: '',\n screenReaderText: {\n label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n },\n icons: {\n clear: <Icon src={Close} />,\n submit: <Icon src={Search} />,\n },\n onBlur: () => {},\n onChange: () => {},\n onFocus: () => {},\n onClear: () => {},\n inputProps: {},\n variant: 'light',\n disabled: false,\n submitButtonLocation: 'internal',\n buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}