Skip to content

Commit

Permalink
refactor: code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
PKulkoRaccoonGang committed Dec 19, 2023
1 parent b7d84a7 commit b37f7db
Show file tree
Hide file tree
Showing 11 changed files with 61 additions and 36 deletions.
1 change: 1 addition & 0 deletions src/Container/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ Container.propTypes = {
...RBContainer.propTypes,
/** Override the base element */
as: PropTypes.elementType,
/** Specifies the contents of the container */
children: PropTypes.node,
/** Fill all available space at any breakpoint */
fluid: PropTypes.bool,
Expand Down
4 changes: 4 additions & 0 deletions src/Dropdown/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const Dropdown = React.forwardRef(
);
},
);

Dropdown.propTypes = {
autoClose: PropTypes.oneOfType([
PropTypes.string,
Expand All @@ -79,6 +80,7 @@ Dropdown.propTypes = {
show: PropTypes.bool,
variant: PropTypes.oneOf(['light', 'dark']),
};

Dropdown.defaultProps = {
autoClose: true,
className: '',
Expand Down Expand Up @@ -127,9 +129,11 @@ Dropdown.Item = React.forwardRef(
);
},
);

Dropdown.Item.propTypes = {
className: PropTypes.string,
};

Dropdown.Item.defaultProps = {
className: undefined,
};
Expand Down
3 changes: 3 additions & 0 deletions src/Form/FormSwitch.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,11 @@ FormSwitch.propTypes = {
children: PropTypes.node.isRequired,
/** Specifies class name to append to the base element. */
className: PropTypes.string,
/** Specifies class name to append to the label element. */
labelClassName: PropTypes.string,
/** Specifies helper text to display below the switch. */
helperText: PropTypes.node,
/** Determines whether the label should float to the left when the switch is active. */
floatLabelLeft: PropTypes.bool,
};

Expand Down
11 changes: 6 additions & 5 deletions src/Hyperlink/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,28 +101,29 @@ Hyperlink.propTypes = {
children: PropTypes.node.isRequired,
/** Custom class names for the hyperlink */
className: PropTypes.string,
/** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
/** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
* loaded into the same browsing context as the current one.
* If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
* any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
*/
target: PropTypes.string,
/** specifies the callback function when the link is clicked */
onClick: PropTypes.func,
// eslint-disable-next-line max-len
/** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
externalLinkAlternativeText: isRequiredIf(
PropTypes.string,
props => props.target === '_blank',
),
// eslint-disable-next-line max-len
/** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
externalLinkTitle: isRequiredIf(
PropTypes.string,
props => props.target === '_blank',
),
/** type of hyperlink */
variant: PropTypes.oneOf(['default', 'muted', 'brand']),
/** specify the link style. By default it will be underlined. */
/** specify the link style. By default, it will be underlined. */
isInline: PropTypes.bool,
/** specify if we need to show launch Icon. By default it will be visible. */
/** specify if we need to show launch Icon. By default, it will be visible. */
showLaunchIcon: PropTypes.bool,
};

Expand Down
27 changes: 17 additions & 10 deletions src/Icon/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,28 +70,35 @@ function Icon({
}

Icon.propTypes = {
// eslint-disable-next-line max-len
/** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
/**
* An icon component to render.
* Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';`
*/
src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/** HTML element attributes to pass through to the underlying svg element */
svgAttrs: PropTypes.shape({
'aria-label': PropTypes.string,
'aria-labelledby': PropTypes.string,
}),
// eslint-disable-next-line max-len
/** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
/**
* the `id` property of the Icon element, by default this value is generated
* with the `newId` function with the `prefix` of `Icon`.
*/
id: PropTypes.string,
// eslint-disable-next-line max-len
/** The size of the icon. */
size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
// eslint-disable-next-line max-len
/** A class name that will define what the Icon looks like. */
className: PropTypes.string,
// eslint-disable-next-line max-len
/** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */
/**
* a boolean that determines the value of `aria-hidden` attribute on the Icon span,
* this value is `true` by default.
*/
hidden: PropTypes.bool,
// eslint-disable-next-line max-len
/** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
/**
* a string or an element that will be used on a secondary span leveraging the `sr-only` style
* for screenreader only text, this value is `undefined` by default. This value is recommended for use unless
* the Icon is being used in a way that is purely decorative or provides no additional context for screen
* reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
*/
screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
};
Expand Down
5 changes: 1 addition & 4 deletions src/Layout/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,6 @@ SIZES.forEach(size => {
Layout.defaultProps[size] = sizeDefaultProps;
});

export {
Col,
Row,
};
export { Col, Row };
Layout.Element = LayoutElement;
export default Layout;
3 changes: 3 additions & 0 deletions src/Modal/ModalDialog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,9 @@ ModalDialog.propTypes = {
* Prevent clicking on the backdrop to close the modal
*/
isBlocking: PropTypes.bool,
/**
* Specifies the z-index of the modal
*/
zIndex: PropTypes.number,
};

Expand Down
17 changes: 11 additions & 6 deletions src/Modal/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable max-len */
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
Expand Down Expand Up @@ -271,21 +270,26 @@ class Modal extends React.Component {
Modal.propTypes = {
/** specifies whether the modal renders open or closed on the initial render. It defaults to false. */
open: PropTypes.bool,
/** is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element.
*/
/** is the selector for an element in the dom which the modal should be rendered under.
* It uses querySelector to find the first element that matches that selector,
* and then creates a React portal to a div underneath the parent element.
*/
parentSelector: PropTypes.string,
/** a string or an element that is rendered inside of the modal title, above the modal body. */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
/** a string or an element that is rendered inside of the modal body, between the title and the footer. */
body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
/** an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button. */
/** an array of either elements or shapes that take the form of the buttonPropTypes.
* See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40)
* for a list of acceptable props to pass as part of a button. */
buttons: PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.element,
PropTypes.shape({}), // TODO: Only accept nodes in the future
])),
/** specifies the display text of the default Close button. It defaults to "Close". */
closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
/** a function that is called on close. It can be used to perform actions upon closing of the modal, such as restoring focus to the previous logical focusable element. */
/** a function that is called on close. It can be used to perform actions upon closing of the modal,
* such as restoring focus to the previous logical focusable element. */
onClose: PropTypes.func.isRequired,
variant: PropTypes.shape({
status: PropTypes.string,
Expand All @@ -295,7 +299,8 @@ Modal.propTypes = {
/** specifies whether a close button is rendered in the modal header. It defaults to true. */
renderHeaderCloseButton: PropTypes.bool,
/**
* Specifies optional classes to add to the element with the '.modal-dialog' class. See Bootstrap documentation for possible classes. Some options: modal-lg, modal-sm, modal-dialog-centered
* Specifies optional classes to add to the element with the '.modal-dialog' class.
* See Bootstrap documentation for possible classes. Some options: modal-lg, modal-sm, modal-dialog-centered
*/
dialogClassName: PropTypes.string,
};
Expand Down
19 changes: 12 additions & 7 deletions src/SearchField/SearchFieldAdvanced.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable max-len */
import React, {
useRef, createContext, useState, useEffect,
} from 'react';
Expand Down Expand Up @@ -138,27 +137,32 @@ SearchFieldAdvanced.propTypes = {
onSubmit: PropTypes.func.isRequired,
/** specifies a custom class name. */
className: PropTypes.string,
/** specifies a callback function for when the user loses focus in the `SearchField` component. The default is an empty function. For example:
/** specifies a callback function for when the user loses focus in the `SearchField` component.
* The default is an empty function. For example:
```jsx
<SearchField onBlur={event => console.log(event)} />
``` */
onBlur: PropTypes.func,
/** specifies a callback function for when the value in `SearchField` is changed by the user. The default is an empty function. For example:
/** specifies a callback function for when the value in `SearchField` is changed by the user.
* The default is an empty function. For example:
```jsx
<SearchField onChange={value => console.log(value)} />
``` */
onChange: PropTypes.func,
/** specifies a callback function for when the value in `SearchField` is cleared by the user. The default is an empty function. For example:
/** specifies a callback function for when the value in `SearchField` is cleared by the user.
* The default is an empty function. For example:
```jsx
<SearchField onClear={() => console.log('search cleared')} />
``` */
onClear: PropTypes.func,
/** specifies a callback function for when the user focuses in the `SearchField` component. The default is an empty function. For example:
/** specifies a callback function for when the user focuses in the `SearchField` component.
* The default is an empty function. For example:
```jsx
<SearchField onFocus={event => console.log(event)} />
``` */
onFocus: PropTypes.func,
/** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations). The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
/** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations).
* The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
screenReaderText: PropTypes.shape({
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
Expand All @@ -171,7 +175,8 @@ SearchFieldAdvanced.propTypes = {
submit: PropTypes.element.isRequired,
clear: PropTypes.element,
}),
/** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component more than once on a page. */
/** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component
* more than once on a page. */
formAriaLabel: PropTypes.string,
/** Specifies whether the `SearchField` is disabled. */
disabled: PropTypes.bool,
Expand Down
6 changes: 3 additions & 3 deletions src/SearchField/SearchFieldLabel.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable max-len */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
Expand All @@ -21,8 +20,9 @@ function SearchFieldLabel({ children, ...props }) {

SearchFieldLabel.propTypes = {
/**
* specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,
* a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
* specifies the label to use for the input field (e.g., for i18n translations).
* Note: if `children` is not provided, a screenreader-only label will be used in
* its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
*/
children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
};
Expand Down
1 change: 0 additions & 1 deletion src/SearchField/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable max-len */
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';

Expand Down

0 comments on commit b37f7db

Please sign in to comment.