21 | {
22 | !usearrowastrigger
23 | ? (
24 |
29 | {children}
30 |
32 | )
33 | : (
34 | <>
35 | {!arrow.expandToContent && arrow.position === 'left' && (
36 |
37 | )}
38 |
{children}
39 | {!arrow.expandToContent && arrow.position === 'right' && (
40 |
41 | )}
42 |
43 | )
44 | }
45 |
{console.log('copied');}}
6 | copy="Copied by Button!"
7 | display="charlie"
8 | theme="primary"
9 | element={Button}
10 | />
11 | ```
12 |
13 | ### Copy by Span
14 | ```js
15 |
34 | {children || display}
35 |
36 | {!window.navigator.clipboard ? (
37 |
40 | ) : null}
41 |
42 | );
43 | }
44 |
45 | CopyToClipboard.propTypes = {
46 | /** Message to be displayed after text is copied */
47 | message: PropTypes.string,
48 | /** Callback function executed after text is copied */
49 | onCopy: PropTypes.func,
50 | /** Text to be copied */
51 | copy: PropTypes.string.isRequired,
52 | /** Text to be displayed */
53 | display: PropTypes.string,
54 | /** Children of custom element if you are using any custom element */
55 | children: PropTypes.oneOfType([
56 | PropTypes.element,
57 | PropTypes.string,
58 | PropTypes.object,
59 | PropTypes.node,
60 | ]),
61 | };
62 |
63 | export default CopyToClipboard;
64 |
--------------------------------------------------------------------------------
/src/components/FixedWrapper/FixedWrapper.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --fixed-wrapper-top: 0;
3 | --fixed-wrapper-left: 0;
4 | --fixed-wrapper-right: 0;
5 | }
6 |
7 | .tyk-fixed-wrapper {
8 | inset-inline-start: var(--fixed-wrapper-left);
9 | inset-inline-end: var(--fixed-wrapper-right);
10 | position: sticky;
11 | inset-block-start: var(--fixed-wrapper-top);
12 | z-index: 8;
13 | }
14 |
15 | .tyk-fixed-wrapper--scrolled {
16 | box-shadow: 2px 2px 5px rgba(0 0 0 / 10%);
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/FixedWrapper/FixedWrapper.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FixedWrapper from './index';
3 |
4 | describe('FixedWrapper', () => {
5 | const selectors = {
6 | wrapper: '.tyk-fixed-wrapper',
7 | scrolled: '.tyk-fixed-wrapper--scrolled',
8 | };
9 |
10 | it('renders the component with proper classes based on props', () => {
11 | cy
12 | .mount(
13 |
14 | The Content
15 | ,
16 | )
17 | .get(selectors.wrapper)
18 | .should('have.class', 'foo')
19 | .and('have.class', 'bar')
20 | .and('be.visible');
21 | });
22 |
23 | it('adds another class when the page is scrolled if the "showShadow" prop is true and removes it when scroll back to 0', () => {
24 | cy
25 | .mount(
26 |
27 |
28 | The Content
29 |
30 |
,
31 | )
32 | .get(selectors.scrolled)
33 | .should('not.exist');
34 |
35 | cy.scrollTo(0, 500);
36 | cy.get(selectors.scrolled)
37 | .should('exist');
38 |
39 | cy.scrollTo(0, 0);
40 | cy.get(selectors.scrolled)
41 | .should('not.exist');
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/src/components/FixedWrapper/index.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useRef } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import debounce from '../../utils/debounce';
5 |
6 | /**
7 | * FixedWrapper component, keeps all its children in a fix position on the page,
8 | * even if the scroll position changes
9 | * i.e: The top navigation bar of a page sits within FixedWrapper component
10 | */
11 | function FixedWrapper({ children, className = '', showShadow }) {
12 | const fixedWrapperRef = useRef(null);
13 |
14 | const attachShadow = useCallback(() => {
15 | const element = fixedWrapperRef.current;
16 |
17 | if (!element) {
18 | return;
19 | }
20 |
21 | if (window.scrollY) {
22 | element.classList.add('tyk-fixed-wrapper--scrolled');
23 | } else {
24 | element.classList.remove('tyk-fixed-wrapper--scrolled');
25 | }
26 | }, [fixedWrapperRef.current]);
27 |
28 | const debouncedAttachShadow = useCallback(debounce(attachShadow, 100), [attachShadow]);
29 |
30 | useEffect(() => {
31 | if (showShadow) {
32 | window.addEventListener('scroll', debouncedAttachShadow);
33 | }
34 |
35 | return () => {
36 | window.removeEventListener('scroll', debouncedAttachShadow);
37 | };
38 | }, [debouncedAttachShadow, showShadow]);
39 |
40 | return (
41 |
42 | { children }
43 |
44 | );
45 | }
46 |
47 | FixedWrapper.propTypes = {
48 | children: PropTypes.oneOfType([
49 | PropTypes.element,
50 | PropTypes.node,
51 | PropTypes.string,
52 | ]),
53 | /** Css classes that can be passed to the FixedWraper element */
54 | className: PropTypes.string,
55 | /** If true, bottom shadow on the FixedWrapper component
56 | * is being displayed when scroll happens
57 | */
58 | showShadow: PropTypes.bool,
59 | };
60 |
61 | export default FixedWrapper;
62 |
--------------------------------------------------------------------------------
/src/components/FloatingContainer/FloatingContainer.css:
--------------------------------------------------------------------------------
1 | .floating-container {
2 | position: fixed;
3 | inset-block-start: -9999px;
4 | overflow: auto;
5 | z-index: var(--modal-z-index, 1080);
6 | }
7 |
8 | .floating-container__content-wrapper {
9 | block-size: 100%;
10 | }
--------------------------------------------------------------------------------
/src/components/Icon/Icon.css:
--------------------------------------------------------------------------------
1 | .tyk-icon {
2 | + .tyk-icon {
3 | margin-inline-start: var(--spacing-sm);
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/Icon/Icon.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Icon from './index';
3 |
4 | describe('Icon', () => {
5 | const faFamily = 'fa-regular';
6 | const faFamilySolid = 'fa-solid';
7 | const tykonFamily = 'tykon';
8 | const selectors = {
9 | icon: '.tyk-icon',
10 | };
11 |
12 | it('renders an icon and the default family is "fa-regular"', () => {
13 | cy.mount(
10 |
11 |
12 | { content ??
The Content }
13 |
14 |
15 |
{`Item ${index}`}
47 | ))}
48 |
49 | );
50 |
51 | cy.mount(
14 | {content}
15 | ,
16 | )
17 | .get(selectors.message)
18 | .should('have.class', 'tyk-message--info')
19 | .and('have.text', content);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/components/InfoNote/Readme.md:
--------------------------------------------------------------------------------
1 | *Themes*
2 | ```js
3 | Default InfoNote
4 | ```
5 |
--------------------------------------------------------------------------------
/src/components/InfoNote/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Message from '../Message';
5 |
6 | function InfoNote({ children }) {
7 | return (
8 |
9 | { children }
10 |
11 | );
12 | }
13 |
14 | InfoNote.propTypes = {
15 | children: PropTypes.oneOfType([
16 | PropTypes.element,
17 | PropTypes.node,
18 | PropTypes.string,
19 | ]),
20 | };
21 |
22 | export default InfoNote;
23 |
--------------------------------------------------------------------------------
/src/components/List/List.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import List from './index';
3 |
4 | describe('List', () => {
5 | it('test list is rendered with items in primary theme', () => {
6 | cy.mount(
7 |
11 | Alpha
12 | Bravo
13 | Charlie
14 | Delta
15 |
,
16 | );
17 |
18 | cy.get('.tyk-list__wrapper')
19 | .get('ul')
20 | .should('have.class', 'tyk-list');
21 |
22 | cy.contains('LABEL').should('exist');
23 | cy.contains('Alpha').should('exist');
24 | cy.contains('Bravo').should('exist');
25 | cy.contains('Charlie').should('exist');
26 | cy.contains('Delta').should('exist');
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/src/components/List/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 |
3 | item 1
4 | item 2
5 | item 3
6 | item 4
7 |
8 | ```
9 | *Inline list*
10 | ```js
11 |
12 |
13 | Item 1
14 |
15 |
16 | Item 2
17 |
18 |
19 | Item 3
20 |
21 |
22 | Item 4
23 |
24 |
25 | ```
26 | *Inline list with separator*
27 | ```js
28 |
29 |
30 | Item 1
31 |
32 |
33 | Item 2
34 |
35 |
36 | Item 3
37 |
38 |
39 | Item 4
40 |
41 |
42 |
43 |
44 | Item 1
45 |
46 |
47 | Item 2
48 |
49 |
50 | Item 3
51 |
52 |
53 | Item 4
54 |
55 |
56 | ```
57 |
--------------------------------------------------------------------------------
/src/components/List/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import ListItem from './js/ListItem';
4 |
5 | function List(props) {
6 | const {
7 | className,
8 | children,
9 | label,
10 | labelwidth,
11 | theme = 'secondary',
12 | style = {},
13 | } = props;
14 |
15 | const getCssClasses = () => {
16 | let cssClasses = ['tyk-list'];
17 |
18 | if (theme) {
19 | cssClasses.push(`tyk-list--${theme}`);
20 | }
21 |
22 | if (className) {
23 | cssClasses = cssClasses.concat(className.split(' '));
24 | }
25 |
26 | return cssClasses.join(' ');
27 | };
28 |
29 | const getListStyle = () => {
30 | const styleCopy = structuredClone(style);
31 | if (labelwidth) {
32 | styleCopy.flexBasis = `calc(100% - ${labelwidth} - 20px)`;
33 | }
34 |
35 | return styleCopy;
36 | };
37 |
38 | return (
39 |
40 | {
41 | label !== undefined
42 | ? (
43 |
47 | { label }
48 |
49 | )
50 | : null
51 | }
52 |
55 |
13 | {children}
14 |
15 | );
16 | }
17 |
18 | ListItem.propTypes = {
19 | children: PropTypes.oneOfType([
20 | PropTypes.arrayOf(PropTypes.node),
21 | PropTypes.node,
22 | PropTypes.element,
23 | PropTypes.string,
24 | ]),
25 | className: PropTypes.string,
26 | selected: PropTypes.bool,
27 | };
28 |
29 | export default ListItem;
30 |
--------------------------------------------------------------------------------
/src/components/Loader/Readme.md:
--------------------------------------------------------------------------------
1 | **Circular loader**
2 | ```js
3 |
22 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
23 |
24 |
;
18 |
19 | return withbackground
20 | ? {loader}
21 | : loader;
22 | }
23 |
24 | Loader.propTypes = {
25 | /** Add a class to loader */
26 | className: PropTypes.string,
27 | /** The type of the loader (linear || circular || brand) */
28 | type: PropTypes.string,
29 | /** The size of the loader (small || big). Only applicable to the circular loader. */
30 | size: PropTypes.string,
31 | /** Position of the loader (absolute || relative) */
32 | position: PropTypes.string,
33 | /** Defines whether loader should be rendered with or without background */
34 | withbackground: PropTypes.bool,
35 | /** Only applicable to the linear loader. Stops the animation and fills the entire bar. */
36 | isLoaded: PropTypes.bool,
37 | };
38 |
39 | export default Loader;
40 |
--------------------------------------------------------------------------------
/src/components/Message/Message.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Message from './index';
3 |
4 | function Component(props) {
5 | return (
6 |
7 | lorem ipsum
8 |
9 | );
10 | }
11 |
12 | describe('Message', () => {
13 | const infoThemeClass = 'tyk-message--info';
14 | const successThemeClass = 'tyk-message--success';
15 | const noMarginClass = 'no-margin';
16 | const selectors = {
17 | message: '.tyk-message',
18 | closeIcon: '.tyk-icon.fa-xmark',
19 | title: '.tyk-message__title',
20 | };
21 |
22 | it('renders the component with the info theme by default', () => {
23 | cy.mount(
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalBody.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.element,
15 | PropTypes.node,
16 | PropTypes.string,
17 | ]),
18 | };
19 |
20 | export default ModalBody;
21 |
--------------------------------------------------------------------------------
/src/components/Modal/js/ModalFooter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ModalFooter({ children }) {
5 | return (
6 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalFooter.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.element,
15 | PropTypes.node,
16 | PropTypes.string,
17 | ]),
18 | };
19 |
20 | export default ModalFooter;
21 |
--------------------------------------------------------------------------------
/src/components/Modal/js/ModalHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ModalHeader({ children }) {
5 | return (
6 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalHeader.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.arrayOf(PropTypes.node),
15 | PropTypes.element,
16 | PropTypes.node,
17 | PropTypes.string,
18 | ]),
19 | };
20 |
21 | export default ModalHeader;
22 |
--------------------------------------------------------------------------------
/src/components/Modal/js/ModalTitle.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ModalTitle({ children }) {
5 | return (
6 |
7 | { children }
8 |
9 | );
10 | }
11 |
12 | ModalTitle.propTypes = {
13 | children: PropTypes.element,
14 | };
15 |
16 | export default ModalTitle;
17 |
--------------------------------------------------------------------------------
/src/components/NavBar/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function NavBar({
5 | align = 'center',
6 | children,
7 | left,
8 | right,
9 | title,
10 | pre,
11 | subtitle,
12 | withTabs,
13 | }) {
14 | const subtitleContent = subtitle ? { subtitle }
: null;
15 | return (
16 |
17 |
18 | {pre && (
19 |
{pre}
20 | )}
21 | {
22 | title
23 | ? (
24 |
25 |
{ title }
26 | { subtitleContent }
27 |
28 | )
29 | : subtitleContent
30 | }
31 |
32 | {left && (
33 |
{ left }
34 | )}
35 | {right && (
36 |
{ right }
37 | )}
38 |
39 |
42 | );
43 | }
44 |
45 | NavBar.propTypes = {
46 | align: PropTypes.string,
47 | children: PropTypes.oneOfType([
48 | PropTypes.arrayOf(PropTypes.node),
49 | PropTypes.node,
50 | PropTypes.element,
51 | PropTypes.string,
52 | ]),
53 | title: PropTypes.string,
54 | subtitle: PropTypes.string,
55 | pre: PropTypes.oneOfType([
56 | PropTypes.element,
57 | PropTypes.node,
58 | ]),
59 | left: PropTypes.oneOfType([
60 | PropTypes.element,
61 | PropTypes.node,
62 | ]),
63 | right: PropTypes.oneOfType([
64 | PropTypes.element,
65 | PropTypes.node,
66 | ]),
67 | withTabs: PropTypes.bool,
68 | };
69 |
70 | export default NavBar;
71 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --navigation-background-color: white;
3 | --navigation-item-padding-y: var(--spacing-sm);
4 | --navigation-item-padding-x: var(--spacing-md);
5 | --navigation-item-background-color: white;
6 | --navigation-item-color: var(--text-color);
7 | --navigation-item-hover-background-color: var(--color-primary-base);
8 | --navigation-item-hover-color: white;
9 | --navigation-item-active-background-color: var(--color-primary-dark);
10 | --navigation-item-active-color: white;
11 | --navigation-padding: 0;
12 | }
13 |
14 | .tyk-navigation {
15 | background-color: var(--navigation-background-color);
16 | block-size: 100%;
17 | overflow: auto;
18 | padding: var(--navigation-padding);
19 | inline-size: 100%;
20 |
21 | .tyk-navigation-item {
22 | inline-size: 100%;
23 |
24 | a {
25 | color: var(--navigation-item-color);
26 | display: flex;
27 | padding-block: var(--navigation-item-padding-y);
28 | padding-inline: var(--navigation-item-padding-x);
29 | text-decoration: none;
30 | transition: all .2s ease;
31 |
32 | &:hover {
33 | background-color: var(--navigation-item-hover-background-color);
34 | color: var(--navigation-item-hover-color);
35 | }
36 |
37 | &.active {
38 | background-color: var(--navigation-item-active-background-color);
39 | color: var(--navigation-item-active-color);
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navigation from './index';
3 |
4 | describe('Navigation', () => {
5 | const selectors = {
6 | navigation: '.tyk-navigation',
7 | item: '.tyk-navigation-item',
8 | };
9 |
10 | it('renders the component', () => {
11 | cy.mount(
19 | item 1
20 | item 2
21 | ,
22 | )
23 | .get(selectors.item)
24 | .should('have.length', 2);
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/src/components/Navigation/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 |
3 |
4 | Link 1
5 |
6 |
7 | Link 2
8 |
9 |
10 | Link 3
11 |
12 |
13 | ```
14 |
--------------------------------------------------------------------------------
/src/components/Navigation/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import NavigationItem from './js/NavigationItem';
4 |
5 | function Navigation({ children }) {
6 | return (
7 |
10 | );
11 | }
12 |
13 | Navigation.propTypes = {
14 | children: PropTypes.oneOfType([
15 | PropTypes.arrayOf(PropTypes.node),
16 | PropTypes.node,
17 | PropTypes.element,
18 | PropTypes.string,
19 | ]),
20 | };
21 |
22 | Navigation.Item = NavigationItem;
23 |
24 | export default Navigation;
25 |
--------------------------------------------------------------------------------
/src/components/Navigation/js/NavigationItem.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function NavigationItem({ children }) {
5 | return (
6 |
7 | {children}
8 |
9 | );
10 | }
11 |
12 | NavigationItem.propTypes = {
13 | children: PropTypes.oneOfType([
14 | PropTypes.arrayOf(PropTypes.node),
15 | PropTypes.node,
16 | PropTypes.element,
17 | PropTypes.string,
18 | ]),
19 | };
20 |
21 | export default NavigationItem;
22 |
--------------------------------------------------------------------------------
/src/components/Panel/js/PanelBody.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Collapsible from '../../Collapsible';
5 | import { PortalContext } from '../panel-context';
6 |
7 | function PanelBody({
8 | children,
9 | noPadding,
10 | className,
11 | ...rest
12 | }) {
13 | const getCssClasses = useCallback(
14 | () => [
15 | 'tyk-panel__body',
16 | className,
17 | noPadding && 'no-padding',
18 | ].filter(Boolean).join(' '),
19 | [className, noPadding],
20 | );
21 |
22 | return (
23 |
24 | {
25 | (portalContext) => (
26 | portalContext.collapsable
27 | ? (
28 |
33 | { children }
34 |
35 | )
36 | : (
37 |
41 | { children }
42 |
43 | )
44 | )
45 | }
46 |
47 | );
48 | }
49 |
50 | PanelBody.propTypes = {
51 | children: PropTypes.oneOfType([
52 | PropTypes.element,
53 | PropTypes.node,
54 | PropTypes.string,
55 | ]),
56 | noPadding: PropTypes.bool,
57 | className: PropTypes.string,
58 | };
59 |
60 | export default PanelBody;
61 |
--------------------------------------------------------------------------------
/src/components/Panel/js/PanelFooter.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function PanelFooter(props) {
5 | const { children } = props;
6 | return (
7 |
8 | { children }
9 |
10 | );
11 | }
12 |
13 | PanelFooter.propTypes = {
14 | children: PropTypes.oneOfType([
15 | PropTypes.element,
16 | PropTypes.node,
17 | PropTypes.string,
18 | ]),
19 | };
20 |
21 | export default PanelFooter;
22 |
--------------------------------------------------------------------------------
/src/components/Panel/js/PanelHeader.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Icon from '../../Icon';
5 | import { PortalContext } from '../panel-context';
6 |
7 | class PanelHeader extends Component {
8 | getCssClasses(props) {
9 | const { className } = this.props;
10 | let cssClasses = ['tyk-panel__header'];
11 |
12 | if (props.collapsable) {
13 | cssClasses.push('collapsable');
14 | }
15 |
16 | if (className) {
17 | cssClasses = cssClasses.concat(className.split(' '));
18 | }
19 |
20 | return cssClasses.join(' ');
21 | }
22 |
23 | render() {
24 | const {
25 | children,
26 | } = this.props;
27 |
28 | return (
29 |
30 | {
31 | (portalContext) => {
32 | const HeaderTag = portalContext.theme === 'blank' ? 'h3' : 'div';
33 | const iconType = portalContext.collapsed ? 'chevron-down' : 'chevron-up';
34 |
35 | return (
36 |
40 | { children }
41 | {
42 | portalContext.collapsable
43 | ?
44 | : null
45 | }
46 |
47 | );
48 | }
49 | }
50 |
51 | );
52 | }
53 | }
54 |
55 | PanelHeader.propTypes = {
56 | children: PropTypes.oneOfType([
57 | PropTypes.element,
58 | PropTypes.node,
59 | PropTypes.string,
60 | ]).isRequired,
61 | className: PropTypes.string,
62 | };
63 |
64 | export default PanelHeader;
65 |
--------------------------------------------------------------------------------
/src/components/Panel/panel-context.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const PortalContext = createContext();
4 |
--------------------------------------------------------------------------------
/src/components/Pill/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | /**
5 | * Pill
6 | */
7 | function Pill(props) {
8 | const {
9 | children,
10 | className,
11 | theme = 'default',
12 | } = props;
13 |
14 | const getCssClasses = () => {
15 | let cssClasses = ['tyk-pill', ...theme.split(' ').map((t) => `tyk-pill--${t}`)];
16 |
17 | if (className) {
18 | cssClasses = cssClasses.concat(className);
19 | }
20 |
21 | return cssClasses.join(' ');
22 | };
23 |
24 | return (
25 |
26 | {children}
27 |
28 | );
29 | }
30 |
31 | Pill.propTypes = {
32 | children: PropTypes.oneOfType([
33 | PropTypes.arrayOf(PropTypes.node),
34 | PropTypes.node,
35 | PropTypes.element,
36 | PropTypes.string,
37 | ]),
38 | /** Css classes that can be passed to the Pill element */
39 | className: PropTypes.string,
40 | /** Theme that can be applied to a Pill */
41 | theme: PropTypes.string,
42 | };
43 |
44 | export default Pill;
45 |
--------------------------------------------------------------------------------
/src/components/RevealPanel/Readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | ```js
4 | import { useCallback, useRef, useState } from "react";
5 | import RevealPanel from "./index";
6 |
7 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
8 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
9 |
10 | e and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including verse and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including vers
11 | eeee
12 |
13 |
14 | ```
--------------------------------------------------------------------------------
/src/components/RevealPanel/RevealPanel.css:
--------------------------------------------------------------------------------
1 | .tyk-ui-reveal-wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: flex-end;
5 | align-items: stretch;
6 | inline-size: 100%;
7 | block-size: 100%;
8 | z-index: 1000;
9 | position: absolute;
10 | inset-block-end: 0;
11 | inset-inline-start: 0;
12 | pointer-events: none;
13 | }
14 |
15 | .tyk-ui-reveal-wrapper__panel {
16 | max-block-size: calc(100% - 2rem);
17 | background-color: white;
18 | padding: 0;
19 | margin: 0;
20 | display: flex;
21 | flex-direction: column;
22 | pointer-events: all;
23 | flex-shrink: 0;
24 | overflow: auto;
25 | }
26 |
27 | .tyk-ui-reveal-wrapper__hole {
28 | flex-grow: 1;
29 | opacity: 0;
30 | inline-size: 100%;
31 | background-color: green;
32 | -webkit-user-select: none;
33 | user-select: none;
34 | pointer-events: none;
35 | z-index: -1;
36 | }
37 |
38 | .tyk-ui-reveal-wrapper__gutter {
39 | block-size: 2rem;
40 | inline-size: 100%;
41 | cursor: row-resize;
42 | display: flex;
43 | background-color: var(--color-primary-base);
44 | z-index: 2;
45 | pointer-events: all;
46 | justify-content: space-between;
47 | align-items: stretch;
48 | position: relative;
49 | box-shadow: 0 5px 10px rgba(0 0 0 / 30%);
50 | }
51 |
52 | .tyk-ui-reveal-wrapper__gutter__headerleft,
53 | .tyk-ui-reveal-wrapper__gutter__headerright {
54 | display: flex;
55 | align-items: center;
56 | flex: 1;
57 | }
58 |
59 | .tyk-ui-reveal-wrapper__gutter__headerleft {
60 | justify-content: flex-start;
61 | }
62 |
63 | .tyk-ui-reveal-wrapper__gutter__headerright {
64 | justify-content: flex-end;
65 | }
66 |
67 | .tyk-ui-reveal-wrapper__gutter__logo {
68 | inline-size: 1rem;
69 | block-size: 1rem;
70 | -webkit-user-select: none;
71 | user-select: none;
72 | pointer-events: none;
73 | padding: 0.2rem;
74 | z-index: 2;
75 | background-image: url('./images/drag.svg');
76 | align-self: center;
77 |
78 | &:hover {
79 | border: dashed;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/RevealPanel/RevealPanel.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import RevealPanel from './index';
3 |
4 | function Component() {
5 | return (
6 |
7 | e and scrambled it to make a type specimen book.
8 | It has survived not only five centuries, but also
9 |
10 | Panel content to make a type specimen book.
11 |
12 |
13 | );
14 | }
15 |
16 | describe('RevealPanel.test.js', () => {
17 | it('renders RevealPanel component', () => {
18 | cy.mount(
5 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --sidebar-background-color: white;
3 | --sidebar-top: 58px;
4 | --sidebar-height: calc(100vh - 58px);
5 | --sidebar-width: 280px;
6 | --sidebar-padding: 0;
7 | }
8 |
9 | .tyk-sidebar {
10 | background-color: var(--sidebar-background-color);
11 | block-size: var(--sidebar-height);
12 | flex: 0 0 var(--sidebar-width);
13 | padding: var(--sidebar-padding);
14 | position: sticky;
15 | overflow: auto;
16 | inset-block-start: var(--sidebar-top);
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/Stepper/StepperContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 |
3 | const StepperContext = createContext();
4 |
5 | export const StepperProvider = StepperContext.Provider;
6 |
7 | export const useStepper = () => {
8 | const context = useContext(StepperContext);
9 | if (!context) {
10 | throw new Error('useStepper must be used within a Stepper component');
11 | }
12 | return context;
13 | };
--------------------------------------------------------------------------------
/src/components/Stepper/js/Buttons.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { useStepper } from "../StepperContext";
4 |
5 | const Buttons = ({ children }) => {
6 | const {
7 | activeStep,
8 | steps,
9 | setActiveStep,
10 | setErrors,
11 | onFinish,
12 | onChange,
13 | onSkip,
14 | stepValidator,
15 | stepErrMessage,
16 | setValidationAttempted,
17 | } = useStepper();
18 |
19 | const isLastStep = activeStep === steps.length - 1;
20 |
21 | const goToNextStep = async () => {
22 | setValidationAttempted(true);
23 | const isNextStepAllowed = await stepValidator(steps[activeStep]?.props?.id);
24 |
25 | if (isNextStepAllowed) {
26 | if (activeStep < steps.length - 1) {
27 | setActiveStep((prev) => prev + 1);
28 | setErrors((prev) => ({ ...prev, [activeStep]: null }));
29 | onChange(steps[activeStep]?.props?.id);
30 | } else if (activeStep === steps.length - 1) {
31 | onFinish();
32 | }
33 | setValidationAttempted(false);
34 | } else {
35 | setErrors((prev) => ({
36 | ...prev,
37 | [activeStep]: stepErrMessage,
38 | }));
39 | }
40 | };
41 |
42 | const goToPreviousStep = () => {
43 | if (activeStep > 0) {
44 | setActiveStep((prev) => prev - 1);
45 | setValidationAttempted(false);
46 | onChange(steps[activeStep]?.props?.id);
47 | }
48 | };
49 |
50 | const onSkipStep = () => {
51 | onSkip(steps[activeStep]?.props?.id);
52 | };
53 |
54 | return (
55 |
56 | {children({
57 | goToNextStep,
58 | goToPreviousStep,
59 | onSkipStep,
60 | isLastStep,
61 | activeStep,
62 | stepId: steps[activeStep]?.props?.id || "",
63 | })}
64 |
65 | );
66 | };
67 |
68 | Buttons.displayName = "StepperButtons";
69 | Buttons.propTypes = {
70 | children: PropTypes.func.isRequired,
71 | };
72 |
73 | export default Buttons;
74 |
--------------------------------------------------------------------------------
/src/components/Stepper/js/Step.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | const Step = ({ children }) => {
5 | return <>{children};
6 | };
7 |
8 | Step.displayName = "StepperStep";
9 |
10 | Step.propTypes = {
11 | children: PropTypes.node.isRequired,
12 | title: PropTypes.string,
13 | description: PropTypes.string,
14 | id: PropTypes.string,
15 | };
16 |
17 | export default Step;
18 |
--------------------------------------------------------------------------------
/src/components/Stepper/js/StepList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useStepper } from "../StepperContext";
3 | import StepItem from "./StepItem";
4 |
5 | const StepList = () => {
6 | const { steps, activeStep, errors, orientation } = useStepper();
7 |
8 | return (
9 |
10 | {steps.map((step, index) => (
11 |
18 |
28 | ))}
29 |
14 | {hasError ? '!' : number}
15 |
16 | );
17 | };
18 |
19 | StepNumber.propTypes = {
20 | number: PropTypes.number,
21 | isCompleted: PropTypes.bool,
22 | isActive: PropTypes.bool,
23 | hasError: PropTypes.bool
24 | };
25 |
26 | export default StepNumber;
--------------------------------------------------------------------------------
/src/components/Stepper/js/StepperButtons.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import Button from "../../Button";
4 | import { useStepper } from "../StepperContext";
5 | import Buttons from "./Buttons";
6 |
7 | export const DefaultButtons = ({
8 | nextBtnTxt,
9 | finishBtnTxt,
10 | backBtnTxt,
11 | skipBtnTxt,
12 | }) => {
13 | const { onSkip } = useStepper();
14 |
15 | return (
16 |
17 | {({
18 | goToNextStep,
19 | goToPreviousStep,
20 | onSkipStep,
21 | isLastStep,
22 | activeStep,
23 | }) => (
24 | <>
25 | {onSkip && (
26 |
27 |
28 | {skipBtnTxt}
29 |
30 |
31 | )}
32 | {activeStep > 0 && (
33 |
34 | {backBtnTxt}
35 |
36 | )}
37 |
38 | {isLastStep ? finishBtnTxt : nextBtnTxt}
39 |
40 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | DefaultButtons.propTypes = {
47 | nextBtnTxt: PropTypes.string.isRequired,
48 | finishBtnTxt: PropTypes.string.isRequired,
49 | backBtnTxt: PropTypes.string.isRequired,
50 | skipBtnTxt: PropTypes.string.isRequired,
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/Table/js/body.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import { tableContext } from '../tableContext';
3 | import { Row } from './row';
4 |
5 | export function Body() {
6 | const { state } = useContext(tableContext);
7 | const { rows } = state;
8 |
9 | return (
10 |
11 | {
12 | rows.map((row, i) => |
)
13 | }
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/Table/js/cell.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export function Cell({ col, row }) {
5 | if (!row.values[col.id]) {
6 | return
15 | {row.values[col.id]?.value}
16 |
17 | );
18 | }
19 | const Component = col.type;
20 | return (
21 |
25 |
28 | {row.values[col.id].children ? row.values[col.id].children : null}
29 |
30 |
31 | );
32 | }
33 |
34 | Cell.propTypes = {
35 | col: PropTypes.instanceOf(Object),
36 | row: PropTypes.instanceOf(Object),
37 | index: PropTypes.number,
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/Table/js/header-cell.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import { tableContext } from '../tableContext';
5 | import Icon from '../../Icon';
6 |
7 | export function HeaderCell({ column }) {
8 | const { sortable } = column;
9 | const [sortOrder, setSortOrder] = useState(sortable?.default || 'ASC');
10 | const { state, sendMessage } = useContext(tableContext);
11 | return (
12 | {
15 | sendMessage('sort', { column, sortOrder });
16 | setSortOrder(sortOrder === 'ASC' ? 'DESC' : 'ASC');
17 | } : null}
18 | className={state.maxHeight ? 'fixed-header' : ''}
19 | >
20 | {column.name}
21 | {column.sortable && (
22 |
23 |
25 | )}
26 |
27 | );
28 | }
29 |
30 | HeaderCell.propTypes = {
31 | column: PropTypes.instanceOf(Object),
32 | };
33 |
--------------------------------------------------------------------------------
/src/components/Table/js/header.js:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { HeaderCell } from './header-cell';
4 | import { tableContext } from '../tableContext';
5 |
6 | export function Header({ allRowsSelected }) {
7 | const { state, sendMessage } = useContext(tableContext);
8 | const { columns, selectable } = state;
9 |
10 | const generateHeaders = () => columns.map((column) => (
11 |
23 | {selectable?.allowSelectAll ? (
24 |
25 | {
29 | const isCheckbox = v?.target?.tagName.toLowerCase() === 'input' && v?.target?.type.toLowerCase() === 'checkbox';
30 | sendMessage('header.selectAll.change', isCheckbox ? v.target.checked : Boolean(v));
31 | }}
32 | >
33 | {selectable.values?.value}
34 |
35 |
36 | ) : (
37 | selectable.name || 'Select'
38 | )}
39 |
40 | );
41 | };
42 |
43 | return (
44 |
45 |
46 | {selectable?.position === 'LEFT' && generateSelectable()}
47 | {generateHeaders()}
48 | {selectable?.position === 'RIGHT' && generateSelectable()}
49 |
50 |
51 | );
52 | }
53 |
54 | Header.propTypes = {
55 | allRowsSelected: PropTypes.bool,
56 | };
57 |
--------------------------------------------------------------------------------
/src/components/Table/js/row.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useContext } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Checkbox from '../../../form/components/Checkbox';
4 | import { Cell } from './cell';
5 | import { tableContext } from '../tableContext';
6 |
7 | export function Row({ row, index }) {
8 | const { state, sendMessage } = useContext(tableContext);
9 | const { columns, selectable } = state;
10 |
11 | const SelectableCheckbox = useCallback(() => (
12 |
13 | sendMessage('row.selected', { index, selected: v.target.checked })}
16 | />
17 |
18 | ), [row.selected, index]);
19 |
20 | return (
21 |
25 | {selectable && selectable.position === 'LEFT' && SelectableCheckbox()}
26 | {columns.map((col) => (
27 | |
28 | ))}
29 | {selectable && selectable.position === 'RIGHT' && SelectableCheckbox()}
30 |
31 | );
32 | }
33 |
34 | Row.propTypes = {
35 | row: PropTypes.instanceOf(Object),
36 | index: PropTypes.number,
37 | };
38 |
--------------------------------------------------------------------------------
/src/components/Table/tableContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const tableContext = createContext();
4 |
--------------------------------------------------------------------------------
/src/components/Tabs/Tabs.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --tabs-default-content-padding: 25px;
3 | --tab-button-padding: var(--spacing-sm) 2px 3px 2px;
4 | --tab-button-margin: 0;
5 | --tabs-font-familly: var(--font-family-regular);
6 | --tabs-font-familly-active: var(--font-family-regular);
7 | --tab-border-color: var(--color-primary-base);
8 | --tab-active-color: var(--color-primary-base);
9 | --tab-hover-color: var(--color-text-dark);
10 | }
11 |
12 | .tyk-tabs--default {
13 | > ul {
14 | display: flex;
15 | list-style-type: none;
16 | margin: 0;
17 | padding: 0;
18 | overflow: auto;
19 |
20 | li {
21 | display: flex;
22 | white-space: nowrap;
23 | margin-inline-end: var(--tab-button-margin);
24 |
25 | &:last-child {
26 | margin-inline-end: 0;
27 | }
28 |
29 | &.active button {
30 | border-block-end-color: var(--tab-border-color);
31 | color: var(--tab-active-color);
32 | font-family: var(--tabs-font-familly-active);
33 | opacity: 1;
34 |
35 | &:hover {
36 | color: var(--tab-active-color);
37 | }
38 | }
39 |
40 | button:hover {
41 | color: var(--tab-hover-color);
42 | font-family: var(--tabs-font-familly-active);
43 | opacity: 1;
44 | }
45 |
46 | button {
47 | background: none;
48 | border: none;
49 | border-block-end: 1px solid transparent;
50 | color: var(--text-color);
51 | cursor: pointer;
52 | font-size: var(--xs-font-size);
53 | font-family: var(--tabs-font-familly);
54 | padding: var(--tab-button-padding);
55 | margin-inline-end: var(--spacing-md);
56 | transition: all .2s linear;
57 | opacity: 0.7;
58 |
59 | &:focus {
60 | outline: none;
61 | }
62 | }
63 | }
64 | }
65 | }
66 |
67 | .tyk-tab__content {
68 | padding: var(--tabs-default-content-padding);
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/Tabs/js/Tab.js:
--------------------------------------------------------------------------------
1 | import React, {
2 | useContext, useEffect, useState,
3 | } from 'react';
4 | import PropTypes from 'prop-types';
5 | import { TabsContext } from '../tabs-context';
6 | import TabContext from './TabContext';
7 | import TabContent from './TabContent';
8 |
9 | function Tab(props) {
10 | const { id } = props;
11 | const tabsContext = useContext(TabsContext);
12 | const tabContext = useContext(TabContext);
13 | const {
14 | tabExists,
15 | selectedPath,
16 | addTab,
17 | updateTab,
18 | hideTab,
19 | showTab,
20 | rendered,
21 | hideTabContent,
22 | tabs,
23 | } = tabsContext;
24 | const {
25 | children,
26 | } = props;
27 | const [path, setPath] = useState('');
28 |
29 | useEffect(() => {
30 | let tempPath;
31 | if (tabContext && path) {
32 | if (tabContext.tabsId === tabsContext.id) {
33 | tempPath = tabContext.path.concat([id]);
34 | } else {
35 | tempPath = [id];
36 | }
37 | } else {
38 | tempPath = [id];
39 | }
40 | setPath(tempPath);
41 | }, [tabContext]);
42 |
43 | if (!path) {
44 | return null;
45 | }
46 |
47 | return (
48 |
62 | {children}
63 |
64 | );
65 | }
66 |
67 | Tab.propTypes = {
68 | children: PropTypes.oneOfType([
69 | PropTypes.arrayOf(PropTypes.node),
70 | PropTypes.node,
71 | PropTypes.element,
72 | PropTypes.string,
73 | ]),
74 | id: PropTypes.string,
75 | };
76 |
77 | export default Tab;
78 |
--------------------------------------------------------------------------------
/src/components/Tabs/js/TabContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export default createContext();
4 |
--------------------------------------------------------------------------------
/src/components/Tabs/tabs-context.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const TabsContext = createContext();
4 |
--------------------------------------------------------------------------------
/src/components/TextEllipsis/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 |
7 |
12 | );
13 | }
14 |
15 | describe('TextEllipsis', () => {
16 | const classes = {
17 | floatingContainer: 'floating-container',
18 | };
19 | it('should show just first 10 chars followed by "..."', () => {
20 | cy.mount(
15 | {text.substring(0, limit)}
16 | ...
17 |
18 | )
19 | : text
20 | );
21 | }
22 |
23 | TextEllipsis.propTypes = {
24 | /** Text to be shrinked by TextEllipsis */
25 | text: PropTypes.string,
26 | /** Number of characters that TextEllipsis would leave visible */
27 | limit: PropTypes.number,
28 | /** tooltip position */
29 | position: PropTypes.string,
30 | };
31 |
32 | export default TextEllipsis;
33 |
--------------------------------------------------------------------------------
/src/components/Toast/Readme.md:
--------------------------------------------------------------------------------
1 | Toast is a service that displays dialogs on the bottom right part of the screen.
2 |
3 | The dialogs can have one of the Tyk UI themes, so that it would match it's purpose (i.e success message, error message)
4 |
5 | Toast service exposes the `notify` method, which should be called when you want to display the dialog.
6 |
7 | It also exposes alias methods that you can call for specific themes.
8 | For example calling **`toast.notify('message', { theme: 'success' })`** and **`toast.success('message')`** are equivalent.
9 | ```js
10 | import toast from './index.js'
11 | const TestToast = () => (
12 | <>
13 | toast.success('success')}>CLICK Success
14 | toast.danger('danger')}>CLICK Danger
15 | toast.warning('warning')}>CLICK Warning
16 | toast.info('info')}>CLICK Info
17 |
18 | );
19 |
42 | {
43 | Object.keys(messages).map((msgID) => (
44 | messages[msgID]
45 | ? (
46 |
52 | {messages[msgID].message}
53 |
54 | )
55 | : null
56 | ))
57 | }
58 |
59 | );
60 | }
61 |
62 | ToastContainer.propTypes = {
63 | notify: PropTypes.func,
64 | };
65 |
66 | export default ToastContainer;
67 |
--------------------------------------------------------------------------------
/src/components/Toast/js/ToastMessage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Message from '../../Message';
5 | import { useTimeout } from '../../../hooks';
6 |
7 | function ToastMessage(props) {
8 | const {
9 | children,
10 | options,
11 | onClose,
12 | index,
13 | } = props;
14 | const opts = {
15 | theme: 'success',
16 | delay: 3000,
17 | ...options,
18 | };
19 | let timer;
20 |
21 | const handleClose = (itemIndex) => {
22 | onClose(itemIndex);
23 | clearTimeout(timer);
24 | };
25 |
26 | useTimeout(() => handleClose(index), opts.delay);
27 |
28 | return (
29 | handleClose(index)}
33 | >
34 | {children}
35 |
36 | );
37 | }
38 |
39 | ToastMessage.propTypes = {
40 | children: PropTypes.oneOfType([
41 | PropTypes.element,
42 | PropTypes.node,
43 | PropTypes.string,
44 | ]),
45 | options: PropTypes.instanceOf(Object),
46 | onClose: PropTypes.func,
47 | index: PropTypes.number,
48 | };
49 |
50 | export default ToastMessage;
51 |
--------------------------------------------------------------------------------
/src/components/Tooltip/Tooltip.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --tooltip-max-width: 450px;
3 | }
4 |
5 | .tyk-tooltip {
6 | display: flex;
7 | align-items: center;
8 | background-color: var(--color-secondary-extra-dark1);
9 | border: var(--general-border-width) solid var(--color-secondary-dark);
10 | border-radius: var(--general-border-radius);
11 | color: white;
12 | font-size: var(--font-size-xs);
13 | line-height: var(--line-height-sm);
14 | max-inline-size: var(--tooltip-max-width);
15 | padding: var(--spacing-md);
16 |
17 | > .tyk-icon:first-child {
18 | inline-size: 32px;
19 | block-size: 32px;
20 | border-radius: 50%;
21 | color: white;
22 | background-color: var(--color-text-light);
23 |
24 | &::before {
25 | display: flex;
26 | inline-size: 100%;
27 | block-size: 100%;
28 | align-items: center;
29 | justify-content: center;
30 | }
31 | }
32 |
33 | > .tyk-icon + .tyk-tooltip__content {
34 | margin-inline-start: var(--spacing-md);
35 | }
36 |
37 | > .tyk-icon:last-child {
38 | cursor: pointer;
39 | }
40 | }
41 |
42 | .tyk-tooltip__content {
43 | color: white;
44 | word-break: break-word;
45 | word-wrap: break-word;
46 |
47 | + .tyk-icon {
48 | margin-inline-start: var(--spacing-md);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/form/Readme.md:
--------------------------------------------------------------------------------
1 | form components docs (wip)
--------------------------------------------------------------------------------
/src/form/components/Checkbox/Checkbox.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --tyk-checkbox-theme-light-label-color: white;
3 | --tyk-checkbox-theme-light-label-disabled-color: white;
4 | --tyk-checkbox-theme-dark-label-color: var(--text-color);
5 | --tyk-checkbox-theme-dark-label-disabled-color: var(--text-color);
6 | }
7 |
8 | .tyk-checkbox {
9 | label {
10 | --label-indent: 20px;
11 |
12 | display: flex;
13 | align-items: flex-start;
14 | padding-inline-start: var(--label-indent);
15 |
16 | input {
17 | margin-inline-start: calc(-1 * var(--label-indent));
18 | margin-block-start: 5px;
19 | }
20 | }
21 | }
22 |
23 | .tyk-checkbox--theme-light {
24 | label {
25 | color: var(--tyk-checkbox-theme-light-label-color);
26 | }
27 |
28 | &.tyk-checkbox--is-disabled {
29 | label {
30 | color: var(--tyk-checkbox-theme-light-label-disabled-color);
31 | }
32 | }
33 | }
34 |
35 | .tyk-checkbox--is-disabled {
36 | label, p {
37 | cursor: not-allowed;
38 | opacity: 0.5;
39 | }
40 | }
--------------------------------------------------------------------------------
/src/form/components/Checkbox/Checkbox.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Checkbox from './index';
3 |
4 | describe('Checkbox', () => {
5 | it('Checkbox : with error', () => {
6 | const label = 'This is a checkbox';
7 | const error = 'Please fix the error';
8 | cy.mount(
9 |
15 | onChange(value) }}
17 | >
18 | { children }
19 |
20 |
21 | );
22 | }
23 |
24 | DropdownItem.propTypes = {
25 | children: PropTypes.node,
26 | value: PropTypes.any,
27 | };
28 |
29 | export default DropdownItem;
30 |
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/DropdownListWrapper.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import FloatingContainer from '../../../components/FloatingContainer';
5 | import List from '../../../components/List';
6 |
7 | const DropdownListWrapper = forwardRef(function DropdownListWrapper({
8 | children,
9 | element,
10 | maxWidth,
11 | }, ref) {
12 | return (
13 |
22 |
27 | { children }
28 |
29 |
30 | );
31 | });
32 |
33 | DropdownListWrapper.propTypes = {
34 | element: PropTypes.shape({
35 | current: PropTypes.instanceOf(Element),
36 | }),
37 | children: PropTypes.oneOfType([
38 | PropTypes.arrayOf(PropTypes.node),
39 | PropTypes.node,
40 | PropTypes.element,
41 | PropTypes.string,
42 | ]),
43 | maxWidth: PropTypes.string,
44 | };
45 |
46 | export default DropdownListWrapper;
47 |
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/DropdownTrigger.js:
--------------------------------------------------------------------------------
1 | import React, { forwardRef } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Button from '../../../components/Button';
5 | import ButtonGroup from '../../../components/ButtonGroup';
6 |
7 | const DropdownTrigger = forwardRef(function DropdownTrigger({
8 | title,
9 | theme = 'primary',
10 | splitTrigger,
11 | toggle,
12 | onTriggerClick,
13 | value,
14 | }, ref) {
15 | return (
16 | !splitTrigger ? (
17 |
25 | {title}
26 |
27 | ) : (
28 |
29 | onTriggerClick(value) }}
32 | >
33 | {title}
34 |
35 |
44 | )
45 | );
46 | });
47 |
48 | DropdownTrigger.propTypes = {
49 | title: PropTypes.string,
50 | theme: PropTypes.string,
51 | splitTrigger: PropTypes.bool,
52 | toggle: PropTypes.func,
53 | onTriggerClick: PropTypes.func,
54 | value: PropTypes.oneOfType([
55 | PropTypes.string,
56 | PropTypes.number,
57 | ]),
58 | };
59 |
60 | export default DropdownTrigger;
61 |
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/Readme.md:
--------------------------------------------------------------------------------
1 | Basic Drodpown2:
2 | It has an onChange method that returns the value of the selected item.
3 |
4 |
5 | ```js
6 | console.log(value)}>
7 | Item 1 Item 1 Item 1 Item 1
8 | Item 2
9 |
10 | ```
11 |
12 | Split Dropdown2
13 | It displays the Dropdown2 trigger as 2 buttons, one for the title and the other for the caret. It has an onChange method that returns the value of the selected item.
14 |
15 | ```js
16 | console.log(value)}>
17 | Item 1
18 | Item 2
19 |
20 | ```
21 |
22 | Split Dropdown2
23 | It calls onTriggerClick function in case splitTrigger is true, by sending the dropdown value as parameter.
24 |
25 | ```js
26 | console.log(value)} onChange={(value) => console.log(value)}>
27 | Item 1
28 | Item 2
29 |
30 | ```
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/useDrodpownContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 |
3 | export const DropdownContext = createContext();
4 |
5 | function useDropdowContext() {
6 | return useContext(DropdownContext);
7 | }
8 |
9 | export default useDropdowContext;
10 |
--------------------------------------------------------------------------------
/src/form/components/Dropdown2/useDropdown.js:
--------------------------------------------------------------------------------
1 | import {
2 | useState, useRef, useCallback, useEffect,
3 | } from 'react';
4 |
5 | const useDropdown = ({
6 | splitTrigger,
7 | }) => {
8 | const [isOpen, setIsOpen] = useState(false);
9 | const dropdownRef = useRef(null);
10 | const dropdownListRef = useRef(null);
11 |
12 | const toggle = () => setIsOpen(!isOpen);
13 |
14 | const handleOutsideClick = useCallback((e) => {
15 | const triggerElement = !splitTrigger
16 | ? dropdownRef.current
17 | : dropdownRef.current.querySelector('.dropdown__trigger');
18 | if (
19 | isOpen
20 | && !triggerElement.contains(e.target)
21 | && !dropdownListRef.current.contains(e.target)
22 | ) {
23 | setIsOpen(false);
24 | }
25 | }, [isOpen]);
26 |
27 | useEffect(() => {
28 | document.addEventListener('mousedown', handleOutsideClick);
29 | return () => {
30 | document.removeEventListener('mousedown', handleOutsideClick);
31 | };
32 | }, [handleOutsideClick]);
33 |
34 | return {
35 | isOpen,
36 | toggle,
37 | dropdownRef,
38 | dropdownListRef,
39 | };
40 | };
41 |
42 | export default useDropdown;
43 |
--------------------------------------------------------------------------------
/src/form/components/EditableList2/Header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Button from '../../../components/Button';
5 |
6 | function Header({
7 | label, addButtonName, onAddRow, disabled, readOnly,
8 | }) {
9 | return (
10 |
11 | {
12 | label
13 | ? { label }
14 | : null
15 | }
16 | {!disabled && !readOnly && (
17 |
21 | {addButtonName || 'Add'}
22 |
23 | )}
24 |
25 | );
26 | }
27 |
28 | Header.propTypes = {
29 | disabled: PropTypes.bool,
30 | readOnly: PropTypes.bool,
31 | onAddRow: PropTypes.func,
32 | addButtonName: PropTypes.string,
33 | label: PropTypes.oneOfType([
34 | PropTypes.string,
35 | PropTypes.element,
36 | PropTypes.node,
37 | ]),
38 | };
39 |
40 | export default Header;
41 |
--------------------------------------------------------------------------------
/src/form/components/EditableList2/ListHeader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | function ListHeader({
5 | fields,
6 | readOnly,
7 | }) {
8 | return (
9 |
10 | {
11 | fields.map((field, index) => {
12 | const key = typeof field === 'function'
13 | ? field?.(0, index).props.key
14 | : field?.props?.label || JSON.stringify(field);
15 |
16 | return (
17 |
21 | {field?.props?.label}
22 |
23 | );
24 | })
25 | }
26 | Delete
27 |
28 | );
29 | }
30 |
31 | ListHeader.propTypes = {
32 | fields: PropTypes.instanceOf(Array),
33 | readOnly: PropTypes.bool,
34 | };
35 |
36 | export default ListHeader;
37 |
--------------------------------------------------------------------------------
/src/form/components/EditableList2/test-data.js:
--------------------------------------------------------------------------------
1 | import Input2 from '../Input2';
2 | import Combobox2 from '../Combobox2';
3 |
4 | export const editableListProps = {
5 | label: 'Editable List',
6 | addButtonName: 'Add Item',
7 | readOnly: false,
8 | disabled: false,
9 | error: '',
10 | fields: [
11 | {
12 | component: Input2,
13 | size: 6,
14 | props: {
15 | name: 'input1',
16 | label: 'Field 1',
17 | theme: 'default rounded-corners',
18 | placeholder: 'Enter Field 1',
19 | value: '',
20 | },
21 | },
22 | {
23 | component: Combobox2,
24 | size: 6,
25 | props: {
26 | name: 'combobox1',
27 | label: 'Field 2',
28 | theme: 'default rounded-corners',
29 | placeholder: 'Select Field 2',
30 | values: [],
31 | },
32 | },
33 | ],
34 | value: [
35 | [
36 | '123',
37 | { id: '456', name: '456' },
38 | ],
39 | ],
40 | hideOnEmpty: true,
41 | wrapperClassName: 'custom-wrapper-class',
42 | };
43 |
--------------------------------------------------------------------------------
/src/form/components/EditableList2/validate-values.js:
--------------------------------------------------------------------------------
1 | const validateValues = (fields, rowValues) => (rowValues || [[undefined, undefined]])?.map(
2 | (colValue) => colValue?.map(
3 | (value, index) => fields[index].props.validate?.(value),
4 | ),
5 | );
6 |
7 | export default validateValues;
8 |
--------------------------------------------------------------------------------
/src/form/components/EditableList2/with-validation.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState } from 'react';
2 |
3 | /* eslint-disable-next-line react/display-name */
4 | const withValidation = (Component) => ({
5 | onChange, // eslint-disable-line react/prop-types
6 | validate, // eslint-disable-line react/prop-types
7 | error, // eslint-disable-line react/prop-types
8 | ...rest
9 | }) => {
10 | const [internalError, setInternalError] = useState(null);
11 | const onFieldChange = useCallback((event) => {
12 | const value = event?.target
13 | ? ['radio', 'checkbox'].includes(event.target.type)
14 | ? event.target.checked
15 | : event?.target.value
16 | : event;
17 |
18 | let isValid = true;
19 | if (validate && typeof validate === 'function') {
20 | const errorMsg = validate(value);
21 | isValid = !errorMsg;
22 | setInternalError(errorMsg);
23 | }
24 |
25 | onChange(value, isValid);
26 | }, [validate, onChange]);
27 |
28 | return { console.log(e); }}
10 | />
11 | ```
12 | ```js
13 | { console.log(e); }}
21 | />
22 | ```
23 | ```js
24 | { console.log(e); }}
33 | />
34 | ```
35 | ```js
36 |
37 | { console.log(e); }}
46 | />
47 |
48 | ```
49 | ```js
50 | { console.log(e); }}
57 | />
58 |
59 | ```
60 |
--------------------------------------------------------------------------------
/src/form/components/Multiselect/js/MultiselectContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const MultiselectContext = createContext();
4 |
5 | export default MultiselectContext;
6 |
--------------------------------------------------------------------------------
/src/form/components/Pagination/Pagination.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --pagination-border-radius: var(--general-border-radius);
3 | --pagination-button-padding: var(--spacing-sm) var(--spacing-base);
4 | }
5 |
6 | .tyk-pagination {
7 | display: flex;
8 | list-style-type: none;
9 | margin-block: var(--spacing-sm);
10 | margin-inline: 0;
11 | padding: 0;
12 |
13 | li {
14 | align-items: center;
15 | display: flex;
16 | }
17 |
18 | li:first-child button {
19 | border-start-start-radius: var(--pagination-border-radius);
20 | border-end-start-radius: var(--pagination-border-radius);
21 | }
22 |
23 | li:last-child button {
24 | border-start-end-radius: var(--pagination-border-radius);
25 | border-end-end-radius: var(--pagination-border-radius);
26 | }
27 |
28 | span {
29 | margin-block: 0;
30 | margin-inline: var(--spacing-sm);
31 | }
32 |
33 | button {
34 | background: white;
35 | border: none;
36 | font-size: var(--sm-font-size);
37 | font-family: var(--font-family-bold);
38 | cursor: pointer;
39 | color: var(--color-text-dark);
40 | margin-inline-start: -1px;
41 | padding: var(--pagination-button-padding);
42 |
43 | &:hover {
44 | background-color: var(--color-primary-light);
45 | }
46 | }
47 |
48 | .active button {
49 | background-color: var(--color-primary-base);
50 | color: white;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/form/components/Pagination/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 | { console.log(pageNr); }}
7 | />
8 | ```
9 |
--------------------------------------------------------------------------------
/src/form/components/Radio/Radio.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --radio-description-text-padding: 0 0 0 20px;
3 | }
4 |
5 | .tyk-radio {
6 | label {
7 | align-items: center;
8 | display: flex;
9 | }
10 | }
11 |
12 | .tyk-radio--is-disabled {
13 | label, p {
14 | cursor: not-allowed;
15 | opacity: 0.5;
16 | }
17 | }
18 |
19 | .tyk-radio__description-text {
20 | padding: var(--radio-description-text-padding);
21 | }
--------------------------------------------------------------------------------
/src/form/components/Radio/Readme.md:
--------------------------------------------------------------------------------
1 | *Themes*
2 | ```js
3 | { console.log(selectedItems); }}
12 | style={{
13 | maxHeight: '100px'
14 | }}
15 | label="super cool list"
16 | labelwidth="25%"
17 | />
18 | ```
19 |
20 | ```js
21 | { console.log(selectedItems); }}
32 | style={{
33 | maxHeight: '100px'
34 | }}
35 | label="super cool list"
36 | labelwidth="25%"
37 | />
38 | ```
39 |
--------------------------------------------------------------------------------
/src/form/components/SelectableList/SelectableList.css:
--------------------------------------------------------------------------------
1 | .tyk-selectable-list {
2 | margin-block-end: var(--spacing-md);
3 | inline-size: 100%;
4 |
5 | li:not(.tyk-selectable-list__no-items-message) {
6 | font-family: var(--font-family-medium);
7 | padding: 0;
8 |
9 | .tyk-message {
10 | margin-block-end: 0;
11 | }
12 |
13 | label {
14 | font-family: var(--font-family-bold);
15 | margin: 0;
16 | }
17 |
18 | > label {
19 | align-items: center;
20 | cursor: pointer;
21 | display: flex;
22 | padding-block: var(--spacing-sm);
23 | padding-inline: var(--spacing-md);
24 |
25 | input[type="checkbox"] {
26 | margin-inline-start: auto;
27 | }
28 | }
29 | }
30 | }
31 |
32 | .tyk-selectable-list__item--with-icon {
33 | & input[type="checkbox"] {
34 | visibility: hidden;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/form/components/Textarea/Readme.md:
--------------------------------------------------------------------------------
1 | ```js
2 | 
12 | v.{version}
13 |