@seeqdev/qomponents 0.0.1 → 0.0.3

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.
Files changed (60) hide show
  1. package/README.md +33 -13
  2. package/dist/Checkbox/Checkbox.d.ts +7 -0
  3. package/dist/Checkbox/Checkbox.stories.d.ts +5 -0
  4. package/dist/Checkbox/Checkbox.test.d.ts +1 -0
  5. package/dist/Checkbox/Checkbox.types.d.ts +15 -0
  6. package/dist/Checkbox/index.d.ts +1 -0
  7. package/dist/TextArea/TextArea.d.ts +7 -0
  8. package/dist/TextArea/TextArea.stories.d.ts +5 -0
  9. package/dist/TextArea/TextArea.test.d.ts +1 -0
  10. package/dist/TextArea/TextArea.types.d.ts +26 -0
  11. package/dist/TextArea/index.d.ts +1 -0
  12. package/dist/TextField/TextField.types.d.ts +0 -2
  13. package/dist/index.d.ts +6 -0
  14. package/dist/index.esm.js +93 -14
  15. package/dist/index.esm.js.map +1 -1
  16. package/dist/index.js +95 -13
  17. package/dist/index.js.map +1 -1
  18. package/dist/sharedTypes.d.ts +1 -0
  19. package/dist/styles.css +271 -0
  20. package/package.json +2 -1
  21. package/dist/Button/Button.js +0 -44
  22. package/dist/Button/Button.js.map +0 -1
  23. package/dist/Button/Button.stories.js +0 -49
  24. package/dist/Button/Button.stories.js.map +0 -1
  25. package/dist/Button/Button.test.js +0 -49
  26. package/dist/Button/Button.test.js.map +0 -1
  27. package/dist/Button/Button.types.js +0 -4
  28. package/dist/Button/Button.types.js.map +0 -1
  29. package/dist/Button/index.js +0 -2
  30. package/dist/Button/index.js.map +0 -1
  31. package/dist/Icon/Icon.js +0 -38
  32. package/dist/Icon/Icon.js.map +0 -1
  33. package/dist/Icon/Icon.stories.js +0 -35
  34. package/dist/Icon/Icon.stories.js.map +0 -1
  35. package/dist/Icon/Icon.test.js +0 -55
  36. package/dist/Icon/Icon.test.js.map +0 -1
  37. package/dist/Icon/Icon.types.js +0 -16
  38. package/dist/Icon/Icon.types.js.map +0 -1
  39. package/dist/Icon/index.js +0 -2
  40. package/dist/Icon/index.js.map +0 -1
  41. package/dist/TextField/TextField.js +0 -45
  42. package/dist/TextField/TextField.js.map +0 -1
  43. package/dist/TextField/TextField.stories.js +0 -25
  44. package/dist/TextField/TextField.stories.js.map +0 -1
  45. package/dist/TextField/TextField.test.js +0 -35
  46. package/dist/TextField/TextField.test.js.map +0 -1
  47. package/dist/TextField/TextField.types.js +0 -2
  48. package/dist/TextField/TextField.types.js.map +0 -1
  49. package/dist/TextField/index.js +0 -2
  50. package/dist/TextField/index.js.map +0 -1
  51. package/dist/Tooltip/Tooltip.js +0 -30
  52. package/dist/Tooltip/Tooltip.js.map +0 -1
  53. package/dist/Tooltip/Tooltip.stories.js +0 -32
  54. package/dist/Tooltip/Tooltip.stories.js.map +0 -1
  55. package/dist/Tooltip/Tooltip.types.js +0 -3
  56. package/dist/Tooltip/Tooltip.types.js.map +0 -1
  57. package/dist/Tooltip/index.js +0 -2
  58. package/dist/Tooltip/index.js.map +0 -1
  59. package/dist/utils/browserId.js +0 -29
  60. package/dist/utils/browserId.js.map +0 -1
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n let tem;\n const ua = navigator.userAgent;\n let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n if (/trident/i.test(M[1])) {\n tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n return `IE ${tem[1] || ''}`;\n }\n\n if (M[1] === 'Chrome') {\n tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n if (tem !== null) {\n return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n }\n }\n\n M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n M.splice(1, 1, tem[1]);\n }\n\n return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n position?: TooltipPosition;\n children?: JSX.Element | string;\n text: JSX.Element | string;\n delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n position = 'bottom',\n children,\n text,\n delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n before:tw-border-l-transparent before:tw-border-r-black`;\n\n const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n before:tw-border-l-black before:tw-border-r-transparent`;\n\n const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n const placements = {\n top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n };\n\n return (\n <div className=\"tw-group tw-relative tw-inline-block\">\n {children}\n <div\n className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n {text}\n </div>\n </div>\n );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n * - access to Seeq custom icons by providing the desired icon\n * - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n onClick,\n icon,\n type = 'theme',\n extraClassNames,\n id,\n large,\n small,\n color,\n testId,\n customId,\n tooltip,\n tooltipDelay,\n tooltipPlacement,\n number,\n hasExternalTooltipHandler = false,\n}) => {\n if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n const errorMessage =\n color === undefined || color === ''\n ? 'Icon with type=\"color\" must have prop color specified.'\n : 'Icon with prop color must have type=\"color\".';\n return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n }\n\n const colorClasses = {\n 'theme': 'tw-text-sq-color-dark',\n 'white': 'tw-text-white',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': 'tw-text-sq-warning-color',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'tw-text-sq-disabled-gray',\n 'color': '',\n 'info': 'tw-text-sq-link',\n 'text': 'tw-text-sq-text-color',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n const style = type === 'color' && color ? { color } : {};\n const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} ${\n colorClasses[type]\n } ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n const iconTag = (\n <i\n className={appliedClassNames}\n style={style}\n onClick={onClick}\n data-testid={testId}\n data-customid={customId}\n id={id}\n data-number={number}\n />\n );\n\n return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n {iconTag}\n </Tooltip>\n ) : (\n iconTag\n );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n * - use \"variant\" to achieve the desired style\n * - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\n onClick,\n label,\n variant = 'outline',\n type = 'button',\n size = 'sm',\n disabled,\n extraClassNames,\n id,\n testId,\n stopPropagation = true,\n tooltip,\n tooltipOptions,\n iconStyle = 'text',\n icon,\n iconColor,\n}) => {\n const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n const textClassesByVariant = {\n 'outline': 'tw-text-sq-text-color',\n 'theme': 'tw-text-white',\n 'theme-light': 'tw-text-white',\n 'danger': 'tw-text-white',\n 'no-border': 'tw-text-sq-text-color',\n 'warning': 'tw-text-white',\n };\n const classesByVariant = {\n 'outline':\n 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +\n ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',\n 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;\n\n const button = (\n <button\n id={id}\n disabled={disabled}\n data-testid={testId}\n type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n onClick={(e) => {\n stopPropagation && e.stopPropagation();\n onClick && onClick();\n }}\n className={appliedClasses}>\n {icon && (\n <Icon\n icon={icon}\n type={iconStyle}\n color={iconColor}\n extraClassNames={label ? `tw-mr-1 ${textClassesByVariant[variant]}` : ''}\n testId={`${id}_spinner`}\n />\n )}\n {label}\n </button>\n );\n\n return tooltip ? (\n <Tooltip text={tooltip} {...tooltipOptions}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (props, ref: any) => {\n const {\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n size = 'sm',\n value,\n placeholder,\n extraClassNames,\n testId,\n type = 'text',\n } = props;\n\n const internalRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState(null);\n\n const setAllRefs = (receivedRef: any) => {\n if (ref) ref.current = receivedRef;\n internalRef.current = receivedRef;\n };\n\n useEffect(() => {\n const input = internalRef.current! as unknown as HTMLInputElement;\n if (input) input.setSelectionRange(cursor, cursor);\n }, [ref, cursor, value]);\n\n const handleChange = (e: any) => {\n setCursor(e.target.selectionStart);\n onChange && onChange(e);\n };\n\n useEffect(() => {\n /**\n * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n * this will only be the case when the value has been changed externally via store (undo / redo)\n */\n if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n // component\n internalRef.current.value = `${value}`;\n }\n }, [value]);\n\n const baseClasses =\n 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-sq-disabled-gray tw-border-solid tw-border' +\n ' tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames}`;\n\n return (\n <input\n ref={setAllRefs}\n data-testid={testId}\n name={name}\n id={id}\n type={type}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n autoComplete=\"none\"\n onChange={handleChange}\n onKeyUp={onKeyUp}\n />\n );\n },\n);\n"],"names":["useRef","useState","useEffect"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/utils/browserId.ts","../src/Tooltip/Tooltip.types.ts","../src/Tooltip/Tooltip.tsx","../src/Icon/Icon.tsx","../src/Button/Button.tsx","../src/TextField/TextField.tsx","../src/Checkbox/Checkbox.tsx","../src/TextArea/TextArea.tsx"],"sourcesContent":["/**\n * @exports the browser id (i.e., 'IE 11' 'Chrome 90')\n * @see http://stackoverflow.com/questions/2400935/browser-detection-in-javascript\n */\nexport const browserId: string = (function () {\n let tem;\n const ua = navigator.userAgent;\n let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || [];\n if (/trident/i.test(M[1])) {\n tem = /\\brv[ :]+(\\d+)/g.exec(ua) || [];\n return `IE ${tem[1] || ''}`;\n }\n\n if (M[1] === 'Chrome') {\n tem = ua.match(/\\b(OPR|Edge?)\\/(\\d+)/);\n if (tem !== null) {\n return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');\n }\n }\n\n M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];\n if ((tem = ua.match(/version\\/(\\d+)/i)) !== null) {\n M.splice(1, 1, tem[1]);\n }\n\n return M.join(' ');\n})();\nexport const browserName = browserId && browserId.split(' ', 2)[0];\nexport const browserVersion = browserId && parseInt(browserId.split(' ', 2)[1], 10);\nexport const browserIsFirefox = browserId && browserName === 'Firefox';\nexport const browserIsEdgeBeforeChromium =\n browserName && browserVersion && browserName === 'Edge' && browserVersion < 70;\n","export const DEFAULT_TOOL_TIP_DELAY = 1000;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\n\nexport type TooltipPosition = typeof tooltipPositions[number];\n\nexport interface TooltipProps {\n position?: TooltipPosition;\n children?: JSX.Element | string;\n text: JSX.Element | string;\n delay?: number;\n}\n","import React from 'react';\nimport '../styles.css';\nimport { DEFAULT_TOOL_TIP_DELAY, TooltipProps } from './Tooltip.types';\n\n/**\n * This component displays a Tooltip for the provided children.\n */\nexport const Tooltip: React.FunctionComponent<TooltipProps> = ({\n position = 'bottom',\n children,\n text,\n delay = DEFAULT_TOOL_TIP_DELAY,\n}) => {\n const arrowBaseClasses = \"before:tw-content-[''] before:tw-absolute before:tw-border-8\";\n const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';\n const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';\n const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent \n before:tw-border-l-transparent before:tw-border-r-black`;\n\n const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent\n before:tw-border-l-black before:tw-border-r-transparent`;\n\n const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black \n before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;\n const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent \n before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;\n\n const placements = {\n top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,\n left: `-tw-translate-x-full -tw-left-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowLeft}`,\n right: `tw-translate-x-full -tw-right-3 -tw-translate-y-1/2 tw-top-1/2 ${arrowRight}`,\n bottom: `-tw-bottom-2 tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowBottom}`,\n };\n\n return (\n <div className=\"tw-group tw-relative tw-inline-block\">\n {children}\n <div\n className={`tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] \n tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}`}>\n {text}\n </div>\n </div>\n );\n};\n","import React from 'react';\nimport '../styles.css';\nimport { IconProps } from './Icon.types';\nimport Tooltip from '../Tooltip';\n\n/**\n * Icon:\n * - access to Seeq custom icons by providing the desired icon\n * - leverage \"type\" to style your icon\n */\nconst Icon: React.FunctionComponent<IconProps> = ({\n onClick,\n icon,\n type = 'theme',\n extraClassNames,\n id,\n large,\n small,\n color,\n testId,\n customId,\n tooltip,\n tooltipDelay,\n tooltipPlacement,\n number,\n hasExternalTooltipHandler = false,\n}) => {\n if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {\n const errorMessage =\n color === undefined || color === ''\n ? 'Icon with type=\"color\" must have prop color specified.'\n : 'Icon with prop color must have type=\"color\".';\n return <div className=\"tw-text-sq-danger-color\">{errorMessage}</div>;\n }\n\n const colorClassesThemeLight = {\n 'theme': 'tw-text-sq-color-dark',\n 'white': 'tw-text-white',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': 'tw-text-sq-warning-color',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'tw-text-sq-disabled-gray',\n 'color': '',\n 'info': 'tw-text-sq-link',\n 'text': 'tw-text-sq-text-color',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const colorClassesThemeDark = {\n 'theme': 'dark:tw-text-sq-color-dark-dark',\n 'white': '',\n 'dark-gray': 'tw-text-sq-fairly-dark-gray',\n 'warning': '',\n 'darkish-gray': 'tw-text-sq-darkish-gray',\n 'gray': 'dark:tw-text-sq-dark-disabled-gray',\n 'color': '',\n 'info': 'dark:tw-text-sq-link-dark',\n 'text': 'dark:tw-text-sq-dark-text',\n 'inherit': '',\n 'danger': 'tw-text-sq-danger-color',\n 'theme-light': 'tw-text-sq-color-light',\n 'success': 'tw-text-sq-success-color',\n };\n\n const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';\n const style = type === 'color' && color ? { color } : {};\n const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} \n ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;\n\n const iconTag = (\n <i\n className={appliedClassNames}\n style={style}\n onClick={onClick}\n data-testid={testId}\n data-customid={customId}\n id={id}\n data-number={number}\n />\n );\n\n return !hasExternalTooltipHandler && tooltip && tooltip !== '' ? (\n <Tooltip text={tooltip} delay={tooltipDelay} position={tooltipPlacement}>\n {iconTag}\n </Tooltip>\n ) : (\n iconTag\n );\n};\nexport default Icon;\n","import React from 'react';\nimport { ButtonProps } from './Button.types';\nimport '../styles.css';\nimport { browserIsFirefox } from '../utils/browserId';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\n/**\n * All-in-one Button:\n * - use \"variant\" to achieve the desired style\n * - include tooltips and/or icons\n */\nconst Button: React.FunctionComponent<ButtonProps> = ({\n onClick,\n label,\n variant = 'outline',\n type = 'button',\n size = 'sm',\n disabled,\n extraClassNames,\n id,\n testId,\n stopPropagation = true,\n tooltip,\n tooltipOptions,\n iconStyle = 'text',\n icon,\n iconColor,\n}) => {\n const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';\n const baseClassesByVariant = {\n 'outline':\n 'tw-border-solid tw-border',\n 'theme': 'disabled:tw-bg-opacity-50',\n 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',\n 'theme-light': 'disabled:tw-bg-opacity-50',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n const textClassesByVariantLightTheme = {\n 'outline': 'tw-text-sq-text-color',\n 'theme': 'tw-text-white',\n 'theme-light': 'tw-text-white',\n 'danger': 'tw-text-white',\n 'no-border': 'tw-text-sq-text-color',\n 'warning': 'tw-text-white',\n };\n const textClassesByVariantDarkTheme = {\n 'outline': 'dark:tw-text-sq-dark-text',\n 'theme': 'dark:tw-text-white',\n 'theme-light': 'dark:tw-text-white',\n 'danger': 'dark:tw-text-white',\n 'no-border': 'dark:tw-text-sq-dark-text',\n 'warning': 'dark:tw-text-white',\n };\n\n const classesByVariantLightTheme = {\n 'outline':\n 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +\n ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',\n 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',\n 'danger': '',\n 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',\n 'no-border': '',\n 'warning': 'tw-bg-sq-warning-color',\n };\n\n const classesByVariantDarkTheme = {\n 'outline':\n 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +\n ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +\n ' dark:active:tw-border-sq-color-dark',\n 'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',\n 'danger': '',\n 'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',\n 'no-border': '',\n 'warning': '',\n };\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n const appliedClasses = `${baseClasses} ${baseClassesByVariant[variant]} ${sizeClasses[size]} ${classesByVariantLightTheme[variant]} ${classesByVariantDarkTheme[variant]} ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]} ${extraClassNames}`;\n\n const button = (\n <button\n id={id}\n disabled={disabled}\n data-testid={testId}\n type={type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type}\n onClick={(e) => {\n stopPropagation && e.stopPropagation();\n onClick && onClick();\n }}\n className={appliedClasses}>\n {icon && (\n <Icon\n icon={icon}\n type={iconStyle}\n color={iconColor}\n extraClassNames={label ?\n `tw-mr-1 ${textClassesByVariantLightTheme[variant]} ${textClassesByVariantDarkTheme[variant]}` : ''}\n testId={`${id}_spinner`}\n />\n )}\n {label}\n </button>\n );\n\n return tooltip ? (\n <Tooltip text={tooltip} {...tooltipOptions}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n};\nexport default Button;\n","import React, { useEffect, useRef, useState } from 'react';\nimport { TextFieldProps } from './TextField.types';\nimport '../styles.css';\n\n/**\n * Textfield.\n */\nexport const TextField: React.FunctionComponent<TextFieldProps> = React.forwardRef<HTMLInputElement, TextFieldProps>(\n (props, ref: any) => {\n const {\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n size = 'sm',\n value,\n placeholder,\n extraClassNames,\n testId,\n type = 'text',\n } = props;\n\n const internalRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState(null);\n\n const setAllRefs = (receivedRef: any) => {\n if (ref) ref.current = receivedRef;\n internalRef.current = receivedRef;\n };\n\n useEffect(() => {\n const input = internalRef.current! as unknown as HTMLInputElement;\n if (input) input.setSelectionRange(cursor, cursor);\n }, [ref, cursor, value]);\n\n const handleChange = (e: any) => {\n setCursor(e.target.selectionStart);\n onChange && onChange(e);\n };\n\n useEffect(() => {\n /**\n * we need to change the value only if it's different since the internal state of \"input\" will change it anyway\n * this will only be the case when the value has been changed externally via store (undo / redo)\n */\n if (value !== null && value !== undefined && value !== internalRef.current?.value && internalRef.current) {\n // we need to use this method because using the value props directly will switch the input to a \"controlled\"\n // component\n internalRef.current.value = `${value}`;\n }\n }, [value]);\n\n const baseClasses =\n 'tw-height-34 tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm disabled:tw-pointer-events-none' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\n const darkTheme = 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\n const lightTheme = 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n const sizeClasses = {\n sm: 'tw-text-sm',\n lg: 'tw-text-xl',\n };\n\n const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n return (\n <input\n ref={setAllRefs}\n data-testid={testId}\n name={name}\n id={id}\n type={type}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n autoComplete=\"none\"\n onChange={handleChange}\n onKeyUp={onKeyUp}\n />\n );\n },\n);\n","import React from 'react';\nimport { CheckboxProps } from './Checkbox.types';\nimport '../styles.css';\n\nconst alignment = 'tw-flex tw-items-center';\nconst labelClasses = 'tw-ml-1.5 tw-text-sm';\n\nconst baseClasses =\n 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +\n ' dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +\n ' checked:tw-text-sq-text-color' +\n ' disabled:tw-text-sq-fairly-dark-gray';\n\nconst checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses}`;\n\nconst radioClasses = `tw-form-radio ${baseClasses}`;\n\n/**\n * Checkbox and Radio Box Component.\n */\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {\n const {\n type = 'checkbox',\n value,\n disabled = false,\n label,\n onChange,\n onClick,\n onKeyDown,\n checked,\n id,\n name,\n extraClassNames,\n extraLabelClassNames,\n testId,\n } = props;\n\n const assignedId = id ?? 'checkbox_' + Math.random();\n\n return (\n <span className={`${alignment} ${extraClassNames}`}>\n <input\n value={value}\n type={type}\n data-testid={testId}\n name={name}\n id={assignedId}\n checked={checked}\n className={`${type === 'checkbox' ? checkboxClasses : radioClasses} ${\n disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'\n }`}\n disabled={disabled}\n onClick={onClick}\n onChange={onChange}\n onKeyDown={onKeyDown}\n />\n <label\n htmlFor={assignedId}\n className={`${labelClasses} ${extraLabelClassNames} ${\n disabled\n ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'\n : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'\n }`}>\n {label}\n </label>\n </span>\n );\n};\n","import React from 'react';\nimport { TextAreaProps } from './TextArea.types';\nimport '../styles.css';\n\nconst baseClasses =\n 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm' +\n ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border';\n\nconst darkTheme =\n 'dark:tw-border-sq-dark-disabled-gray dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text' +\n ' dark:focus:tw-border-sq-color-dark-dark dark:active:tw-border-sq-color-dark-dark';\nconst lightTheme =\n 'tw-border-sq-disabled-gray tw-text-sq-text-color focus:tw-border-sq-color-dark active:tw-border-sq-color-dark';\n\n/**\n * TextArea.\n */\nexport const TextArea: React.FunctionComponent<TextAreaProps> = ({\n readonly = false,\n onChange,\n onKeyUp,\n id,\n name,\n rows = 3,\n cols = undefined,\n value,\n placeholder,\n extraClassNames,\n testId,\n autofocus = false,\n}) => {\n const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme}`;\n\n return (\n <textarea\n data-testid={testId}\n name={name}\n id={id}\n value={value}\n className={appliedClasses}\n placeholder={placeholder}\n disabled={readonly}\n onChange={onChange}\n onKeyUp={onKeyUp}\n rows={rows}\n cols={cols}\n autoFocus={autofocus}\n />\n );\n};\n"],"names":["useRef","useState","useEffect","baseClasses"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ declare type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
package/dist/styles.css CHANGED
@@ -1457,6 +1457,7 @@ video {
1457
1457
 
1458
1458
  :root {
1459
1459
  --sq-color-dark: 42, 92, 132;
1460
+ --sq-color-dark-dark: 145, 180, 203;
1460
1461
  --sq-white: 255, 255, 255;
1461
1462
  --sq-color-highlight: 4, 145, 194;
1462
1463
  --sq-text-color: 58, 58, 58;
@@ -1470,26 +1471,37 @@ video {
1470
1471
  --sq-success-color: 114, 192, 44;
1471
1472
  --sq-icon: 4, 145, 194;
1472
1473
  --sq-link: 42, 92, 132;
1474
+ --sq-dark-background: 36, 37, 37;
1475
+ --sq-dark-text: 194, 188, 176;
1476
+ --sq-dark-disabled-gray: 70, 73, 73;
1477
+ --sq-highlight-color-dark: 36, 45, 49;
1473
1478
  }
1474
1479
 
1475
1480
  .color_topic {
1476
1481
  --sq-color-dark: 42, 92, 132;
1482
+ --sq-color-dark-dark: 145, 180, 203;
1477
1483
  --sq-color-light: 237, 247, 246;
1478
1484
  --sq-color-highlight: 4, 145, 194;
1479
1485
  --sq-icon: 4, 145, 194;
1480
1486
  --sq-link: 42, 92, 132;
1487
+ --sq-link-dark: 145, 180, 203;
1488
+ --sq-icon-dark: 4, 145, 194;
1481
1489
  }
1482
1490
 
1483
1491
  .color_analysis {
1484
1492
  --sq-color-dark: 0, 121, 96;
1493
+ --sq-color-dark-dark: 31, 207, 166;
1485
1494
  --sq-color-light: 237, 247, 246;
1486
1495
  --sq-color-highlight: 0, 153, 100;
1487
1496
  --sq-icon: 0, 160, 89;
1488
1497
  --sq-link: 0, 121, 96;
1498
+ --sq-link-dark: 21, 99, 81;
1499
+ --sq-icon-dark: 23, 126, 77;
1489
1500
  }
1490
1501
 
1491
1502
  .color_datalab {
1492
1503
  --sq-color-dark: 242, 103, 34;
1504
+ --sq-color-dark-dark: 242, 103, 34;
1493
1505
  --sq-color-light: 237, 247, 246;
1494
1506
  --sq-color-highlight: 244, 123, 62;
1495
1507
  --sq-icon: 242, 103, 34;
@@ -1590,6 +1602,84 @@ video {
1590
1602
  --tw-backdrop-sepia: ;
1591
1603
  }
1592
1604
 
1605
+ .tw-form-checkbox,.tw-form-radio {
1606
+ -webkit-appearance: none;
1607
+ -moz-appearance: none;
1608
+ appearance: none;
1609
+ padding: 0;
1610
+ -webkit-print-color-adjust: exact;
1611
+ print-color-adjust: exact;
1612
+ display: inline-block;
1613
+ vertical-align: middle;
1614
+ background-origin: border-box;
1615
+ -webkit-user-select: none;
1616
+ -moz-user-select: none;
1617
+ user-select: none;
1618
+ flex-shrink: 0;
1619
+ height: 1rem;
1620
+ width: 1rem;
1621
+ color: #2563eb;
1622
+ background-color: #fff;
1623
+ border-color: #6b7280;
1624
+ border-width: 1px;
1625
+ --tw-shadow: 0 0 #0000;
1626
+ }
1627
+
1628
+ .tw-form-checkbox {
1629
+ border-radius: 0px;
1630
+ }
1631
+
1632
+ .tw-form-radio {
1633
+ border-radius: 100%;
1634
+ }
1635
+
1636
+ .tw-form-checkbox:focus,.tw-form-radio:focus {
1637
+ outline: 2px solid transparent;
1638
+ outline-offset: 2px;
1639
+ --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
1640
+ --tw-ring-offset-width: 2px;
1641
+ --tw-ring-offset-color: #fff;
1642
+ --tw-ring-color: #2563eb;
1643
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1644
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1645
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1646
+ }
1647
+
1648
+ .tw-form-checkbox:checked,.tw-form-radio:checked {
1649
+ border-color: transparent;
1650
+ background-color: currentColor;
1651
+ background-size: 100% 100%;
1652
+ background-position: center;
1653
+ background-repeat: no-repeat;
1654
+ }
1655
+
1656
+ .tw-form-checkbox:checked {
1657
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
1658
+ }
1659
+
1660
+ .tw-form-radio:checked {
1661
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
1662
+ }
1663
+
1664
+ .tw-form-checkbox:checked:hover,.tw-form-checkbox:checked:focus,.tw-form-radio:checked:hover,.tw-form-radio:checked:focus {
1665
+ border-color: transparent;
1666
+ background-color: currentColor;
1667
+ }
1668
+
1669
+ .tw-form-checkbox:indeterminate {
1670
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
1671
+ border-color: transparent;
1672
+ background-color: currentColor;
1673
+ background-size: 100% 100%;
1674
+ background-position: center;
1675
+ background-repeat: no-repeat;
1676
+ }
1677
+
1678
+ .tw-form-checkbox:indeterminate:hover,.tw-form-checkbox:indeterminate:focus {
1679
+ border-color: transparent;
1680
+ background-color: currentColor;
1681
+ }
1682
+
1593
1683
  .tw-absolute {
1594
1684
  position: absolute;
1595
1685
  }
@@ -1626,6 +1716,14 @@ video {
1626
1716
  z-index: 50;
1627
1717
  }
1628
1718
 
1719
+ .tw-ml-1 {
1720
+ margin-left: 0.25rem;
1721
+ }
1722
+
1723
+ .tw-ml-1\.5 {
1724
+ margin-left: 0.375rem;
1725
+ }
1726
+
1629
1727
  .tw-mr-1 {
1630
1728
  margin-right: 0.25rem;
1631
1729
  }
@@ -1634,6 +1732,10 @@ video {
1634
1732
  display: inline-block;
1635
1733
  }
1636
1734
 
1735
+ .tw-flex {
1736
+ display: flex;
1737
+ }
1738
+
1637
1739
  .tw-grid {
1638
1740
  display: grid;
1639
1741
  }
@@ -1642,6 +1744,22 @@ video {
1642
1744
  display: none;
1643
1745
  }
1644
1746
 
1747
+ .tw-h-3 {
1748
+ height: 0.75rem;
1749
+ }
1750
+
1751
+ .tw-h-3\.5 {
1752
+ height: 0.875rem;
1753
+ }
1754
+
1755
+ .tw-w-3 {
1756
+ width: 0.75rem;
1757
+ }
1758
+
1759
+ .tw-w-3\.5 {
1760
+ width: 0.875rem;
1761
+ }
1762
+
1645
1763
  .-tw-translate-x-1\/2 {
1646
1764
  --tw-translate-x: -50%;
1647
1765
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1672,6 +1790,18 @@ video {
1672
1790
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1673
1791
  }
1674
1792
 
1793
+ .tw-cursor-not-allowed {
1794
+ cursor: not-allowed;
1795
+ }
1796
+
1797
+ .tw-cursor-pointer {
1798
+ cursor: pointer;
1799
+ }
1800
+
1801
+ .tw-grid-cols-2 {
1802
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1803
+ }
1804
+
1675
1805
  .tw-grid-cols-3 {
1676
1806
  grid-template-columns: repeat(3, minmax(0, 1fr));
1677
1807
  }
@@ -1680,6 +1810,10 @@ video {
1680
1810
  grid-template-columns: repeat(4, minmax(0, 1fr));
1681
1811
  }
1682
1812
 
1813
+ .tw-items-center {
1814
+ align-items: center;
1815
+ }
1816
+
1683
1817
  .tw-gap-4 {
1684
1818
  gap: 1rem;
1685
1819
  }
@@ -1724,6 +1858,11 @@ video {
1724
1858
  background-color: rgba(var(--sq-danger-color), var(--tw-bg-opacity));
1725
1859
  }
1726
1860
 
1861
+ .tw-bg-sq-dark-background {
1862
+ --tw-bg-opacity: 1;
1863
+ background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
1864
+ }
1865
+
1727
1866
  .tw-bg-sq-icon {
1728
1867
  --tw-bg-opacity: 1;
1729
1868
  background-color: rgba(var(--sq-icon), var(--tw-bg-opacity));
@@ -1857,6 +1996,14 @@ video {
1857
1996
 
1858
1997
  /* Make sure to keep these colors in sync with the webserver/_custom_variables.scss values to ensure cohesive UIs */
1859
1998
 
1999
+ [type='checkbox']:checked, [type='radio']:checked {
2000
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2001
+ }
2002
+
2003
+ .tw-dark [type='checkbox']:checked, .tw-dark [type='radio']:checked {
2004
+ background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
2005
+ }
2006
+
1860
2007
  .before\:tw-absolute::before {
1861
2008
  content: var(--tw-content);
1862
2009
  position: absolute;
@@ -1964,6 +2111,11 @@ video {
1964
2111
  content: var(--tw-content);
1965
2112
  }
1966
2113
 
2114
+ .checked\:tw-text-sq-text-color:checked {
2115
+ --tw-text-opacity: 1;
2116
+ color: rgba(var(--sq-text-color), var(--tw-text-opacity));
2117
+ }
2118
+
1967
2119
  .hover\:tw-bg-sq-color-highlight:hover {
1968
2120
  --tw-bg-opacity: 1;
1969
2121
  background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
@@ -1994,6 +2146,11 @@ video {
1994
2146
  background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
1995
2147
  }
1996
2148
 
2149
+ .focus\:tw-outline-none:focus {
2150
+ outline: 2px solid transparent;
2151
+ outline-offset: 2px;
2152
+ }
2153
+
1997
2154
  .focus\:tw-ring-0:focus {
1998
2155
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1999
2156
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2001,6 +2158,10 @@ video {
2001
2158
  --tw-ring-color: r;
2002
2159
  }
2003
2160
 
2161
+ .focus\:tw-ring-offset-0:focus {
2162
+ --tw-ring-offset-width: 0px;
2163
+ }
2164
+
2004
2165
  .active\:tw-border-sq-color-dark:active {
2005
2166
  --tw-border-opacity: 1;
2006
2167
  border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
@@ -2023,6 +2184,11 @@ video {
2023
2184
  --tw-bg-opacity: 0.5;
2024
2185
  }
2025
2186
 
2187
+ .disabled\:tw-text-sq-fairly-dark-gray:disabled {
2188
+ --tw-text-opacity: 1;
2189
+ color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
2190
+ }
2191
+
2026
2192
  .tw-group:hover .group-hover\:tw-inline-block {
2027
2193
  display: inline-block;
2028
2194
  }
@@ -2031,3 +2197,108 @@ video {
2031
2197
  opacity: 1;
2032
2198
  }
2033
2199
 
2200
+ .tw-dark .dark\:tw-border-sq-dark-disabled-gray {
2201
+ --tw-border-opacity: 1;
2202
+ border-color: rgba(var(--sq-dark-disabled-gray), var(--tw-border-opacity));
2203
+ }
2204
+
2205
+ .tw-dark .dark\:tw-border-sq-dark-text {
2206
+ --tw-border-opacity: 1;
2207
+ border-color: rgba(var(--sq-dark-text), var(--tw-border-opacity));
2208
+ }
2209
+
2210
+ .tw-dark .dark\:tw-bg-sq-color-dark {
2211
+ --tw-bg-opacity: 1;
2212
+ background-color: rgba(var(--sq-color-dark), var(--tw-bg-opacity));
2213
+ }
2214
+
2215
+ .tw-dark .dark\:tw-bg-sq-dark-background {
2216
+ --tw-bg-opacity: 1;
2217
+ background-color: rgba(var(--sq-dark-background), var(--tw-bg-opacity));
2218
+ }
2219
+
2220
+ .tw-dark .dark\:tw-bg-sq-icon-dark {
2221
+ --tw-bg-opacity: 1;
2222
+ background-color: rgba(var(--sq-icon-dark), var(--tw-bg-opacity));
2223
+ }
2224
+
2225
+ .tw-dark .dark\:tw-text-sq-color-dark-dark {
2226
+ --tw-text-opacity: 1;
2227
+ color: rgba(var(--sq-color-dark-dark), var(--tw-text-opacity));
2228
+ }
2229
+
2230
+ .tw-dark .dark\:tw-text-sq-dark-disabled-gray {
2231
+ --tw-text-opacity: 1;
2232
+ color: rgba(var(--sq-dark-disabled-gray), var(--tw-text-opacity));
2233
+ }
2234
+
2235
+ .tw-dark .dark\:tw-text-sq-dark-text {
2236
+ --tw-text-opacity: 1;
2237
+ color: rgba(var(--sq-dark-text), var(--tw-text-opacity));
2238
+ }
2239
+
2240
+ .tw-dark .dark\:tw-text-sq-fairly-dark-gray {
2241
+ --tw-text-opacity: 1;
2242
+ color: rgba(var(--sq-fairly-dark-gray), var(--tw-text-opacity));
2243
+ }
2244
+
2245
+ .tw-dark .dark\:tw-text-sq-link-dark {
2246
+ --tw-text-opacity: 1;
2247
+ color: rgba(var(--sq-link-dark), var(--tw-text-opacity));
2248
+ }
2249
+
2250
+ .tw-dark .dark\:tw-text-white {
2251
+ --tw-text-opacity: 1;
2252
+ color: rgb(255 255 255 / var(--tw-text-opacity));
2253
+ }
2254
+
2255
+ .tw-dark .dark\:checked\:tw-bg-sq-dark-text:checked {
2256
+ --tw-bg-opacity: 1;
2257
+ background-color: rgba(var(--sq-dark-text), var(--tw-bg-opacity));
2258
+ }
2259
+
2260
+ .tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover {
2261
+ --tw-bg-opacity: 1;
2262
+ background-color: rgba(var(--sq-color-highlight), var(--tw-bg-opacity));
2263
+ }
2264
+
2265
+ .tw-dark .dark\:hover\:tw-bg-sq-highlight-color-dark:hover {
2266
+ --tw-bg-opacity: 1;
2267
+ background-color: rgba(var(--sq-highlight-color-dark), var(--tw-bg-opacity));
2268
+ }
2269
+
2270
+ .tw-dark .dark\:hover\:tw-bg-sq-link-dark:hover {
2271
+ --tw-bg-opacity: 1;
2272
+ background-color: rgba(var(--sq-link-dark), var(--tw-bg-opacity));
2273
+ }
2274
+
2275
+ .tw-dark .dark\:focus\:tw-border-sq-color-dark:focus {
2276
+ --tw-border-opacity: 1;
2277
+ border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
2278
+ }
2279
+
2280
+ .tw-dark .dark\:focus\:tw-border-sq-color-dark-dark:focus {
2281
+ --tw-border-opacity: 1;
2282
+ border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
2283
+ }
2284
+
2285
+ .tw-dark .dark\:focus\:tw-bg-sq-dark-gray:focus {
2286
+ --tw-bg-opacity: 1;
2287
+ background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
2288
+ }
2289
+
2290
+ .tw-dark .dark\:active\:tw-border-sq-color-dark:active {
2291
+ --tw-border-opacity: 1;
2292
+ border-color: rgba(var(--sq-color-dark), var(--tw-border-opacity));
2293
+ }
2294
+
2295
+ .tw-dark .dark\:active\:tw-border-sq-color-dark-dark:active {
2296
+ --tw-border-opacity: 1;
2297
+ border-color: rgba(var(--sq-color-dark-dark), var(--tw-border-opacity));
2298
+ }
2299
+
2300
+ .tw-dark .dark\:active\:tw-bg-sq-dark-gray:active {
2301
+ --tw-bg-opacity: 1;
2302
+ background-color: rgba(var(--sq-dark-gray), var(--tw-bg-opacity));
2303
+ }
2304
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seeqdev/qomponents",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
@@ -36,6 +36,7 @@
36
36
  "@ladle/react": "2.9.0",
37
37
  "@rollup/plugin-commonjs": "24.0.1",
38
38
  "@rollup/plugin-node-resolve": "15.0.1",
39
+ "@tailwindcss/forms": "0.5.3",
39
40
  "@testing-library/jest-dom": "5.16.5",
40
41
  "@testing-library/react": "14.0.0",
41
42
  "@testing-library/user-event": "14.4.3",
@@ -1,44 +0,0 @@
1
- import React from 'react';
2
- import '../styles.css';
3
- import { browserIsFirefox } from '../utils/browserId';
4
- import Tooltip from '../Tooltip';
5
- import Icon from '../Icon';
6
- /**
7
- * All-in-one Button:
8
- * - use "variant" to achieve the desired style
9
- * - include tooltips and/or icons
10
- */
11
- const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
12
- const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
13
- const textClassesByVariant = {
14
- 'outline': 'tw-text-sq-text-color',
15
- 'theme': 'tw-text-white',
16
- 'theme-light': 'tw-text-white',
17
- 'danger': 'tw-text-white',
18
- 'no-border': 'tw-text-sq-text-color',
19
- 'warning': 'tw-text-white',
20
- };
21
- const classesByVariant = {
22
- 'outline': 'tw-border-sq-disabled-gray tw-border-solid tw-border hover:tw-bg-sq-light-gray' +
23
- ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
24
- 'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight disabled:tw-bg-opacity-50',
25
- 'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
26
- 'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link disabled:tw-bg-opacity-50',
27
- 'no-border': '',
28
- 'warning': 'tw-bg-sq-warning-color',
29
- };
30
- const sizeClasses = {
31
- sm: 'tw-text-sm',
32
- lg: 'tw-text-xl',
33
- };
34
- const appliedClasses = `${baseClasses} ${sizeClasses[size]} ${classesByVariant[variant]} ${textClassesByVariant[variant]} ${extraClassNames}`;
35
- const button = (React.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
36
- stopPropagation && e.stopPropagation();
37
- onClick && onClick();
38
- }, className: appliedClasses },
39
- icon && (React.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariant[variant]}` : '', testId: `${id}_spinner` })),
40
- label));
41
- return tooltip ? (React.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
42
- };
43
- export default Button;
44
- //# sourceMappingURL=Button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,GAAyC,CAAC,EACpD,OAAO,EACP,KAAK,EACL,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,eAAe,EACf,EAAE,EACF,MAAM,EACN,eAAe,GAAG,IAAI,EACtB,OAAO,EACP,cAAc,EACd,SAAS,GAAG,MAAM,EAClB,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,iFAAiF,CAAC;IACtG,MAAM,oBAAoB,GAAG;QAC3B,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,eAAe;QACxB,aAAa,EAAE,eAAe;QAC9B,QAAQ,EAAE,eAAe;QACzB,WAAW,EAAE,uBAAuB;QACpC,SAAS,EAAE,eAAe;KAC3B,CAAC;IACF,MAAM,gBAAgB,GAAG;QACvB,SAAS,EACP,gFAAgF;YAChF,kHAAkH;QACpH,OAAO,EAAE,8EAA8E;QACvF,QAAQ,EAAE,mFAAmF;QAC7F,aAAa,EAAE,6DAA6D;QAC5E,WAAW,EAAE,EAAE;QACf,SAAS,EAAE,wBAAwB;KACpC,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,YAAY;QAChB,EAAE,EAAE,YAAY;KACjB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,gBAAgB,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,OAAO,CAAC,IAAI,eAAe,EAAE,CAAC;IAE9I,MAAM,MAAM,GAAG,CACb,gCACE,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,iBACL,MAAM,EACnB,IAAI,EAAE,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAClF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,eAAe,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;YACvC,OAAO,IAAI,OAAO,EAAE,CAAC;QACvB,CAAC,EACD,SAAS,EAAE,cAAc;QACxB,IAAI,IAAI,CACP,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,EAChB,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,oBAAoB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,MAAM,EAAE,GAAG,EAAE,UAAU,GACvB,CACH;QACA,KAAK,CACC,CACV,CAAC;IAEF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,oBAAC,OAAO,IAAC,IAAI,EAAE,OAAO,KAAM,cAAc,IACvC,MAAM,CACC,CACX,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC"}
@@ -1,49 +0,0 @@
1
- import React from 'react';
2
- import Button from './Button';
3
- import { buttonVariants } from './Button.types';
4
- export default {
5
- title: 'Button',
6
- };
7
- export const AllButtonVariants = () => {
8
- const renderAllVariations = () => (React.createElement(React.Fragment, null, buttonVariants.map((variant) => (React.createElement("div", { key: `{variant_${variant}`, className: "tw-p-4" },
9
- React.createElement(Button, { label: `Variant: ${variant}`, onClick: () => { }, variant: variant }))))));
10
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
11
- React.createElement("div", { className: "color_topic" },
12
- React.createElement("b", null, "Topic Colors"),
13
- renderAllVariations()),
14
- React.createElement("div", { className: "color_analysis" },
15
- React.createElement("b", null, "Analysis Colors"),
16
- renderAllVariations()),
17
- React.createElement("div", { className: "color_datalab" },
18
- React.createElement("b", null, "Datalab Colors"),
19
- renderAllVariations())));
20
- };
21
- export const ButtonWithTooltip = () => {
22
- const renderButtonWithTooltip = () => (React.createElement("div", { className: "tw-p-4" },
23
- React.createElement(Button, { tooltip: "Helpful tooltip", variant: "theme", label: "Hover me" })));
24
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
25
- React.createElement("div", { className: "color_topic" },
26
- React.createElement("b", null, "Topic Colors"),
27
- renderButtonWithTooltip()),
28
- React.createElement("div", { className: "color_analysis" },
29
- React.createElement("b", null, "Analysis Colors"),
30
- renderButtonWithTooltip()),
31
- React.createElement("div", { className: "color_datalab" },
32
- React.createElement("b", null, "Datalab Colors"),
33
- renderButtonWithTooltip())));
34
- };
35
- export const ButtonWithIcon = () => {
36
- const renderButtonWithIcon = () => (React.createElement("div", { className: "tw-p-4" },
37
- React.createElement(Button, { icon: "fc-search-power", variant: "theme", label: "With Icon" })));
38
- return (React.createElement("div", { className: "tw-grid tw-grid-cols-3 tw-gap-4" },
39
- React.createElement("div", { className: "color_topic" },
40
- React.createElement("b", null, "Topic Colors"),
41
- renderButtonWithIcon()),
42
- React.createElement("div", { className: "color_analysis" },
43
- React.createElement("b", null, "Analysis Colors"),
44
- renderButtonWithIcon()),
45
- React.createElement("div", { className: "color_datalab" },
46
- React.createElement("b", null, "Datalab Colors"),
47
- renderButtonWithIcon())));
48
- };
49
- //# sourceMappingURL=Button.stories.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,0CACG,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC/B,6BAAK,GAAG,EAAE,YAAY,OAAO,EAAE,EAAE,SAAS,EAAC,QAAQ;QACjD,oBAAC,MAAM,IAAC,KAAK,EAAE,YAAY,OAAO,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,OAAO,EAAE,OAAO,GAAI,CACzE,CACP,CAAC,CACD,CACJ,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,mBAAmB,EAAE,CAClB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,mBAAmB,EAAE,CAClB,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,GAAG,CACjE,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,uBAAuB,EAAE,CACtB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,uBAAuB,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACjC,6BAAK,SAAS,EAAC,QAAQ;QACrB,oBAAC,MAAM,IAAC,IAAI,EAAC,iBAAiB,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,GAAG,CAC/D,CACP,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,6BAAK,SAAS,EAAC,aAAa;YAC1B,8CAAmB;YAClB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,iDAAsB;YACrB,oBAAoB,EAAE,CACnB;QAEN,6BAAK,SAAS,EAAC,eAAe;YAC5B,gDAAqB;YACpB,oBAAoB,EAAE,CACnB,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}