@helsenorge/designsystem-react 2.10.1 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/Input.js +1 -1
- package/Input.js.map +1 -1
- package/Select.js +1 -1
- package/Select.js.map +1 -1
- package/components/Input/Input.d.ts +1 -1
- package/components/Input/Input.d.ts.map +1 -1
- package/components/Input/componentdata.json +1 -1
- package/components/Input/styles.module.scss +0 -5
- package/components/Input/styles.module.scss.d.ts +0 -1
- package/components/Select/Select.d.ts +2 -0
- package/components/Select/Select.d.ts.map +1 -1
- package/components/Select/componentdata.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [2.10.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.10.0&targetVersion=GTv2.10.1) (2023-01-03)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* listheader mapping fikset ved null child ([e62f9f8](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e62f9f8cdb9af731434f79a56efadb6207e06588))
|
|
7
|
+
|
|
1
8
|
## [2.10.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.9.3&targetVersion=GTv2.10.0) (2023-01-03)
|
|
2
9
|
|
|
3
10
|
|
package/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{useRef as
|
|
1
|
+
import t,{useRef as ee}from"react";import c from"classnames";import{FormMode as p,FormVariant as re,IconSize as A,AnalyticsId as te,AVERAGE_CHARACTER_WIDTH_PX as ae}from"./constants.js";import{a as ne}from"./uuid.js";import{Icon as oe}from"./components/Icons/Icon.js";import{getColor as F}from"./theme/currys/color.js";import{useBreakpoint as le,Breakpoint as ie}from"./hooks/useBreakpoint.js";import{E as ce}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var pe=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r.date="date",r.time="time",r))(pe||{});const se=(r,o,s)=>{const d=o?"1.5rem":"2rem",m=o?`${s}px`:"0px",u="4px";return`calc(${r*ae}px + ${d} + ${m} + ${u})`},Ee=t.forwardRef((r,o)=>{var N;const{className:s,defaultValue:d,placeholder:m,type:u="text",inputId:C=ne(),labelId:b,name:$,transparent:y=!1,icon:a,iconRight:f,mode:l,variant:S,label:_,error:z,errorText:v,testId:B,disabled:n,readOnly:D,autoComplete:I,afterLabelChildren:E,afterInputChildren:V,belowLabelChildren:x,width:k,required:H,onChange:L,onKeyDown:M,autoFocus:X,...q}=r,G=le(),i=ee(null),W=l===p.ondark,K=l===p.onblueberry,w=l===p.oninvalid||v||z,h=S===re.bigform,O=y&&l!==p.ondark&&!w,P=c(e["input-wrapper"],s),j=c(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:W,[e["input-wrapper__label-wrapper--disabled"]]:n}),J=c(e["content-wrapper"],{[e["content-wrapper--transparent"]]:O,[e["content-wrapper--on-blueberry"]]:K,[e["content-wrapper--on-dark"]]:W,[e["content-wrapper--invalid"]]:w,[e["content-wrapper--bigform"]]:h,[e["content-wrapper--disabled"]]:n,[e["content-wrapper--with-icon"]]:a}),Q=c(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:h,[e["content-wrapper__input--disabled"]]:n}),U=n?F("neutral",500):F("black"),g=G===ie.xs||!h?A.XSmall:A.Small,R=()=>a!==void 0?t.createElement(oe,{color:U,size:g,svgIcon:a}):null,Y=()=>{if(i&&i.current&&a){const T=f?0:1;i.current.children[T].focus()}},Z=k?se(k,!!a,g):void 0;return t.createElement(ce,{errorText:v},t.createElement("div",{"data-testid":B,"data-analyticsid":te.Input,className:P},_&&t.createElement("div",{className:j},t.createElement("label",{id:b!=null?b:void 0,htmlFor:C},_),E&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},E)),x&&t.createElement("div",null,x),t.createElement("div",{onClick:Y,ref:i,className:J,style:{maxWidth:Z}},!f&&R(),t.createElement("input",{onChange:L,onKeyDown:M,name:$,type:u,defaultValue:d,id:C,className:Q,ref:o,"aria-labelledby":(N=r["aria-labelledby"])!=null?N:void 0,"aria-invalid":!!w,disabled:n,placeholder:m,readOnly:D,autoComplete:I||"off",required:H,autoFocus:X,...q}),f&&R()),V))});export{Ee as I,pe as a};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
package/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'name'\n | 'placeholder'\n | 'defaultValue'\n | 'required'\n | 'value'\n | 'min'\n | 'max'\n | 'aria-labelledby'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** HMTL Input type */\n type?: keyof typeof InputTypes;\n /** input id */\n inputId?: string;\n /** label id */\n labelId?: string;\n /** Width of input field in characters (approximate) */\n width?: number;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Icon to be displayed next to the input field */\n icon?: SvgIcon;\n /** Places the icon to the right */\n iconRight?: boolean;\n /** Changes the color profile of the input */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the input */\n variant?: keyof typeof FormVariant;\n /** Label of the input */\n label?: string;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Component shown after label */\n afterLabelChildren?: React.ReactNode;\n /** Component shown after input */\n afterInputChildren?: React.ReactNode;\n /** Component shown under label */\n belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n inputId = uuid(),\n labelId,\n name,\n transparent = false,\n icon,\n iconRight,\n mode,\n variant,\n label,\n error,\n errorText,\n testId,\n disabled,\n readOnly,\n autoComplete,\n afterLabelChildren,\n afterInputChildren,\n belowLabelChildren,\n width,\n required,\n ...rest\n } = props;\n const breakpoint = useBreakpoint();\n const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onError = mode === FormMode.oninvalid || errorText || error;\n const bigForm = variant === FormVariant.bigform;\n const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n });\n\n const contentWrapperClass = cn(styles['content-wrapper'], {\n [styles['content-wrapper--transparent']]: isTransparent,\n [styles['content-wrapper--on-blueberry']]: onBlueberry,\n [styles['content-wrapper--on-dark']]: onDark,\n [styles['content-wrapper--invalid']]: onError,\n [styles['content-wrapper--bigform']]: bigForm,\n [styles['content-wrapper--disabled']]: disabled,\n [styles['content-wrapper--with-icon']]: icon,\n });\n\n const inputClass = cn(styles['content-wrapper__input'], {\n [styles['content-wrapper__input--bigform']]: bigForm,\n [styles['content-wrapper__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = () => {\n return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n };\n\n const handleClick = (): void => {\n if (contentWrapperRef && contentWrapperRef.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n }\n };\n\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n {label && (\n <div className={labelWrapperClass}>\n <label id={labelId ?? undefined} htmlFor={inputId}>\n {label}\n </label>\n {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n </div>\n )}\n {belowLabelChildren && <div>{belowLabelChildren}</div>}\n <div className={styles['input-wrapper__after-content-wrapper']}>\n <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n {!iconRight && renderIcon()}\n <input\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputId}\n className={inputClass}\n ref={ref}\n aria-labelledby={props['aria-labelledby'] ?? undefined}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete || 'off'}\n required={required}\n {...rest}\n />\n {iconRight && renderIcon()}\n </div>\n {afterInputChildren}\n </div>\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","width","required","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId","_a"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'name'\n | 'placeholder'\n | 'defaultValue'\n | 'required'\n | 'value'\n | 'min'\n | 'max'\n | 'aria-labelledby'\n | 'onChange'\n | 'onKeyDown'\n | 'autoFocus'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** HMTL Input type */\n type?: keyof typeof InputTypes;\n /** input id */\n inputId?: string;\n /** label id */\n labelId?: string;\n /** Width of input field in characters (approximate) */\n width?: number;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Icon to be displayed next to the input field */\n icon?: SvgIcon;\n /** Places the icon to the right */\n iconRight?: boolean;\n /** Changes the color profile of the input */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the input */\n variant?: keyof typeof FormVariant;\n /** Label of the input */\n label?: string;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Component shown after label */\n afterLabelChildren?: React.ReactNode;\n /** Component shown after input */\n afterInputChildren?: React.ReactNode;\n /** Component shown under label */\n belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n inputId = uuid(),\n labelId,\n name,\n transparent = false,\n icon,\n iconRight,\n mode,\n variant,\n label,\n error,\n errorText,\n testId,\n disabled,\n readOnly,\n autoComplete,\n afterLabelChildren,\n afterInputChildren,\n belowLabelChildren,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n ...rest\n } = props;\n const breakpoint = useBreakpoint();\n const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onError = mode === FormMode.oninvalid || errorText || error;\n const bigForm = variant === FormVariant.bigform;\n const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n });\n\n const contentWrapperClass = cn(styles['content-wrapper'], {\n [styles['content-wrapper--transparent']]: isTransparent,\n [styles['content-wrapper--on-blueberry']]: onBlueberry,\n [styles['content-wrapper--on-dark']]: onDark,\n [styles['content-wrapper--invalid']]: onError,\n [styles['content-wrapper--bigform']]: bigForm,\n [styles['content-wrapper--disabled']]: disabled,\n [styles['content-wrapper--with-icon']]: icon,\n });\n\n const inputClass = cn(styles['content-wrapper__input'], {\n [styles['content-wrapper__input--bigform']]: bigForm,\n [styles['content-wrapper__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = () => {\n return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n };\n\n const handleClick = (): void => {\n if (contentWrapperRef && contentWrapperRef.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n }\n };\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n {label && (\n <div className={labelWrapperClass}>\n <label id={labelId ?? undefined} htmlFor={inputId}>\n {label}\n </label>\n {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n </div>\n )}\n {belowLabelChildren && <div>{belowLabelChildren}</div>}\n\n <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n {!iconRight && renderIcon()}\n <input\n onChange={onChange}\n onKeyDown={onKeyDown}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputId}\n className={inputClass}\n ref={ref}\n aria-labelledby={props['aria-labelledby'] ?? undefined}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete || 'off'}\n required={required}\n autoFocus={autoFocus}\n {...rest}\n />\n {iconRight && renderIcon()}\n </div>\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","inputId","uuid","labelId","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","afterInputChildren","belowLabelChildren","width","required","onChange","onKeyDown","autoFocus","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId","_a"],"mappings":"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"}
|
package/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as
|
|
1
|
+
import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as D,IconSize as T,AVERAGE_CHARACTER_WIDTH_PX as q}from"./constants.js";import{Icon as z}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{getColor as f}from"./theme/currys/color.js";import{E as L}from"./ErrorWrapper.js";import{useUuid as V}from"./hooks/useUuid.js";const X=t=>{const a="2rem";return`calc(${t*q}px + ${a})`},$=(t,a)=>a?f("neutral",500):f(t?"cherry":"blueberry",600),O=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:v,children:E,concept:C="normal",disabled:n,error:h,errorText:i,label:m,selectId:p,name:y=p,mode:o,testId:I,width:d,required:b,value:_,defaultValue:N,...S}=t,u=V(p),w=o==="onblueberry",l=o==="oninvalid"||!!i||!!h,W=o==="ondark",g=$(l,!!n),x=d?X(d):void 0,A=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:W}),R=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:C==="transparent",[e["select-inner-wrapper--on-blueberry"]]:w,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},v),k=c(e.select,{[e["select--on-blueberry"]]:w,[e["select--invalid"]]:l});return r.createElement(L,{errorText:i},r.createElement("div",{"data-testid":I,"data-analyticsid":D.Select,className:e["select-wrapper"],style:{maxWidth:x}},m&&r.createElement("div",{className:A},r.createElement("label",{htmlFor:u},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:R},r.createElement(z,{className:e["select-arrow"],svgIcon:H,color:g,size:T.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:u,name:y,className:k,disabled:n,ref:a,required:b,"aria-required":!!b,value:_,defaultValue:N,...S},E))))});export{O as S};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n /** Component shown after label */\n afterLabelChildren?: React.ReactNode;\n /** Sets the content of the select element. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the visuals of the component */\n concept?: SelectConcept;\n /** The label text above the select */\n label?: string;\n /** Changes the visuals of the component */\n mode?: keyof typeof FormMode;\n /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** select id of the select element */\n selectId?: string;\n /** Width of select in characters (approximate) */\n width?: number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n const {\n afterLabelChildren,\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n label,\n selectId,\n name = selectId,\n mode,\n testId,\n width,\n required,\n value,\n ...rest\n } = props;\n\n const uuid = useUuid(selectId);\n const onBlueberry = mode === 'onblueberry';\n const invalid = mode === 'oninvalid' || !!errorText || !!error;\n const onDark = mode === 'ondark';\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n });\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n {label && (\n <div className={selectLabelClasses}>\n <label htmlFor={uuid}>{label}</label>\n {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n </div>\n )}\n <div className={selectInnerWrapperClasses}>\n <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n <select\n aria-invalid={!!invalid}\n id={uuid}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n value={value}\n {...rest}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n /** Component shown after label */\n afterLabelChildren?: React.ReactNode;\n /** Sets the content of the select element. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the visuals of the component */\n concept?: SelectConcept;\n /** The label text above the select */\n label?: string;\n /** Changes the visuals of the component */\n mode?: keyof typeof FormMode;\n /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** select id of the select element */\n selectId?: string;\n /** Width of select in characters (approximate) */\n width?: number;\n /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n defaultValue?: string | number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n const {\n afterLabelChildren,\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n label,\n selectId,\n name = selectId,\n mode,\n testId,\n width,\n required,\n value,\n defaultValue,\n ...rest\n } = props;\n\n const uuid = useUuid(selectId);\n const onBlueberry = mode === 'onblueberry';\n const invalid = mode === 'oninvalid' || !!errorText || !!error;\n const onDark = mode === 'ondark';\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n });\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n return (\n <ErrorWrapper errorText={errorText}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n {label && (\n <div className={selectLabelClasses}>\n <label htmlFor={uuid}>{label}</label>\n {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n </div>\n )}\n <div className={selectInnerWrapperClasses}>\n <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n <select\n aria-invalid={!!invalid}\n id={uuid}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n aria-required={!!required}\n value={value}\n defaultValue={defaultValue}\n {...rest}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAyCA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,aAAAC,KACGC,CACD,EAAAjB,EAEEkB,EAAOC,EAAQV,CAAQ,EACvBW,EAAcT,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDe,EAASV,IAAS,SAClBW,EAAY5B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C2B,EAAWV,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CW,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCrB,IAAY,cACjE,CAACqB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC/B,EACjD,CAAC+B,EAAa,mCAAoC9B,CACpD,EACAO,CAAA,EAGIyB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB/B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA8B,EAAA,CAAa,UAAAtB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBkB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hf,GACET,EAAA,cAAA,MAAA,CAAI,UAAWyB,CAAA,EACbzB,EAAA,cAAA,QAAA,CAAM,QAASmB,CAAO,EAAAV,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAW2B,EAAa,uCAA0C,EAAAxB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW4B,CAAA,EACb5B,EAAA,cAAAgC,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GlC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIuB,EACJ,KAAAR,EACA,UAAWkB,EACX,SAAAhC,EACA,IAAAK,EACA,SAAAa,EACA,gBAAe,CAAC,CAACA,EACjB,MAAAC,EACA,aAAAC,EACC,GAAGC,CAAA,EAEHb,CACH,CACF,CACF,CACF,CAEJ,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormMode, FormVariant } from '../../constants';
|
|
3
3
|
import { SvgIcon } from '../Icons';
|
|
4
|
-
export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-labelledby'> {
|
|
4
|
+
export interface InputProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required' | 'value' | 'min' | 'max' | 'aria-labelledby' | 'onChange' | 'onKeyDown' | 'autoFocus'> {
|
|
5
5
|
/** Adds custom classes to the element. */
|
|
6
6
|
className?: string;
|
|
7
7
|
/** HMTL Input type */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAEjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAQnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAA2C,MAAM,iBAAiB,CAAC;AAEjG,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAQnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,UAAU,GACV,UAAU,GACV,cAAc,GACd,MAAM,GACN,aAAa,GACb,cAAc,GACd,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,iBAAiB,GACjB,UAAU,GACV,WAAW,GACX,WAAW,CACd;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAUD,QAAA,MAAM,KAAK,qFAsHT,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"HMTL Input type","name":"type","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\" | \"date\" | \"time\"","value":[{"value":"\"number\""},{"value":"\"text\""},{"value":"\"email\""},{"value":"\"password\""},{"value":"\"search\""},{"value":"\"tel\""},{"value":"\"url\""},{"value":"\"date\""},{"value":"\"time\""}]}},"inputId":{"defaultValue":null,"description":"input id","name":"inputId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"label id","name":"labelId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of input field in characters (approximate)","name":"width","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"number"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"icon":{"defaultValue":null,"description":"Icon to be displayed next to the input field","name":"icon","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"SvgIcon"}},"iconRight":{"defaultValue":null,"description":"Places the icon to the right","name":"iconRight","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the color profile of the input","name":"mode","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the input","name":"variant","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"error":{"defaultValue":null,"description":"Activates Error style for the input","name":"error","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"afterInputChildren":{"defaultValue":null,"description":"Component shown after input","name":"afterInputChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"min":{"defaultValue":null,"description":"","name":"min","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"max":{"defaultValue":null,"description":"","name":"max","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}}}}
|
|
1
|
+
{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"type":{"defaultValue":null,"description":"HMTL Input type","name":"type","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"number\" | \"text\" | \"email\" | \"password\" | \"search\" | \"tel\" | \"url\" | \"date\" | \"time\"","value":[{"value":"\"number\""},{"value":"\"text\""},{"value":"\"email\""},{"value":"\"password\""},{"value":"\"search\""},{"value":"\"tel\""},{"value":"\"url\""},{"value":"\"date\""},{"value":"\"time\""}]}},"inputId":{"defaultValue":null,"description":"input id","name":"inputId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"label id","name":"labelId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of input field in characters (approximate)","name":"width","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"number"}},"transparent":{"defaultValue":null,"description":"If true, the component will be transparent.","name":"transparent","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"icon":{"defaultValue":null,"description":"Icon to be displayed next to the input field","name":"icon","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"SvgIcon"}},"iconRight":{"defaultValue":null,"description":"Places the icon to the right","name":"iconRight","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"mode":{"defaultValue":null,"description":"Changes the color profile of the input","name":"mode","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"variant":{"defaultValue":null,"description":"Changes the visuals of the input","name":"variant","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}},"label":{"defaultValue":null,"description":"Label of the input","name":"label","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"error":{"defaultValue":null,"description":"Activates Error style for the input","name":"error","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"string"}},"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"afterInputChildren":{"defaultValue":null,"description":"Component shown after input","name":"afterInputChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"belowLabelChildren":{"defaultValue":null,"description":"Component shown under label","name":"belowLabelChildren","parent":{"fileName":"src/components/Input/Input.tsx","name":"InputProps"},"declarations":[{"fileName":"src/components/Input/Input.tsx","name":"InputProps"}],"required":false,"type":{"name":"ReactNode"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"readOnly":{"defaultValue":null,"description":"","name":"readOnly","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"autoComplete":{"defaultValue":null,"description":"","name":"autoComplete","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"placeholder":{"defaultValue":null,"description":"","name":"placeholder","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string"}},"defaultValue":{"defaultValue":null,"description":"","name":"defaultValue","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}},"min":{"defaultValue":null,"description":"","name":"min","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"max":{"defaultValue":null,"description":"","name":"max","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"string | number"}},"aria-labelledby":{"defaultValue":null,"description":"Identifies the element (or elements) that labels the current element.\n@see aria-describedby.","name":"aria-labelledby","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"AriaAttributes"}],"required":false,"type":{"name":"string"}},"onChange":{"defaultValue":null,"description":"","name":"onChange","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"ChangeEventHandler<HTMLInputElement>"}},"onKeyDown":{"defaultValue":null,"description":"","name":"onKeyDown","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"DOMAttributes"}],"required":false,"type":{"name":"KeyboardEventHandler<HTMLInputElement>"}},"autoFocus":{"defaultValue":null,"description":"","name":"autoFocus","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"InputHTMLAttributes"}],"required":false,"type":{"name":"boolean"}}}}
|
|
@@ -11,7 +11,6 @@ export type Styles = {
|
|
|
11
11
|
'content-wrapper--transparent': string;
|
|
12
12
|
'content-wrapper--with-icon': string;
|
|
13
13
|
'input-wrapper': string;
|
|
14
|
-
'input-wrapper__after-content-wrapper': string;
|
|
15
14
|
'input-wrapper__after-label-children': string;
|
|
16
15
|
'input-wrapper__label-wrapper': string;
|
|
17
16
|
'input-wrapper__label-wrapper--on-dark': string;
|
|
@@ -24,6 +24,8 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
|
|
|
24
24
|
selectId?: string;
|
|
25
25
|
/** Width of select in characters (approximate) */
|
|
26
26
|
width?: number;
|
|
27
|
+
/** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
|
|
28
|
+
defaultValue?: string | number;
|
|
27
29
|
}
|
|
28
30
|
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
29
31
|
export default Select;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAO9F,aAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClI,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yHAAyH;IACzH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAA2C,QAAQ,EAAY,MAAM,iBAAiB,CAAC;AAO9F,aAAK,aAAa,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAClI,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yHAAyH;IACzH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAaD,eAAO,MAAM,MAAM,uFA8EjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}
|
|
1
|
+
{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"defaultValue":{"defaultValue":null,"description":"Gives defaultvalue to the comp. Preferred over selected prop on option by react","name":"defaultValue","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string | number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}
|
package/package.json
CHANGED