@onewelcome/react-lib-components 5.1.0 → 6.0.0

package/dist/esm/_BaseStyling_/BaseStyling.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSecondary?: string;\n  colorTertiary?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey25Transparent?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorLightBlue500?: string;\n  colorLightBlue600?: string;\n  colorShadowBlue?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  buttonPrimaryDefaultColor?: string;\n  buttonPrimaryPressedColor?: string;\n  buttonFillTextColor?: string;\n  buttonPrimaryHoverColor?: string;\n  buttonPrimaryFocusedColor?: string;\n  buttonOutlineHoverTextColor?: string;\n  buttonSecondaryDefaultColor?: string;\n  buttonSecondaryHoverColor?: string;\n  buttonSecondaryFocusedColor?: string;\n  buttonSecondaryPressedColor?: string;\n  buttonWarningDefaultColor?: string;\n  buttonWarningHoverColor?: string;\n  buttonWarningFocusedColor?: string;\n  buttonWarningPressedColor?: string;\n  buttonDangerDefaultColor?: string;\n  buttonDangerHoverColor?: string;\n  buttonDangerFocusedColor?: string;\n  buttonDangerPressedColor?: string;\n  buttonDefaultColor?: string;\n  buttonDefaultHoverColor?: string;\n  buttonDefaultFocusedColor?: string;\n  buttonDefaultPressedColor?: string;\n  buttonOutlineActiveTextColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  dragBackgroundColor?: string;\n  dragBorderStyle?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n  snackbarTextColor?: string;\n  snackbarInfoBackgroundColor?: string;\n  snackbarSuccessBackgroundColor?: string;\n  snackbarErrorBackgroundColor?: string;\n  snackbarWarningBackgroundColor?: string;\n  snackbarBorderRadius?: string;\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n  wizardStepIndicatorFutureColor?: string;\n  contextMenuHoverColor?: string;\n  contextMenuPressedColor?: string;\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontSizeH1?: string;\n  fontSizeH2?: string;\n  fontSizeH3?: string;\n  fontSizeH4?: string;\n  fontSizeSub?: string;\n  fontSizeCode?: string;\n  formControlFontSize?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey25Transparent: \"rgba(247, 247, 249, .8)\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorLightBlue500: \"#00BCDD\",\n    colorLightBlue600: \"#0096B1\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorBlack100: \"#000000\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorShadowBlue: \"#7078C3\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSecondary: \"var(--color-green500)\",\n    colorTertiary: \"var(--color-light-blue600)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\", //FIXME: UCL-395\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"var(--default-border-radius)\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"1rem\",\n    buttonBorderStyle: \"solid\",\n    buttonFillTextColor: \"var(--light)\",\n    buttonPrimaryDefaultColor: \"var(--color-primary500)\",\n    buttonPrimaryHoverColor: \"var(--color-primary600)\",\n    buttonPrimaryFocusedColor: \"var(--color-primary500)\",\n    buttonPrimaryPressedColor: \"var(--color-primary700)\",\n    buttonSecondaryDefaultColor: \"var(--color-green500)\",\n    buttonSecondaryHoverColor: \"var(--color-green600)\",\n    buttonSecondaryFocusedColor: \"var(--color-green500)\",\n    buttonSecondaryPressedColor: \"var(--color-green700)\",\n    buttonWarningDefaultColor: \"var(--color-orange500)\",\n    buttonWarningHoverColor: \"var(--color-orange600)\",\n    buttonWarningFocusedColor: \"var(--color-orange500)\",\n    buttonWarningPressedColor: \"var(--color-orange700)\",\n    buttonDangerDefaultColor: \"var(--color-red500)\",\n    buttonDangerHoverColor: \"var(--color-red600)\",\n    buttonDangerFocusedColor: \"var(--color-red500)\",\n    buttonDangerPressedColor: \"var(--color-red700)\",\n    buttonDefaultColor: \"var(--color-blue-grey700)\",\n    buttonDefaultHoverColor: \"var(--color-blue-grey800)\",\n    buttonDefaultFocusedColor: \"var(--color-blue-grey700)\",\n    buttonDefaultPressedColor: \"var(--color-blue-grey800)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    dragBackgroundColor: \"var(--color-blue-grey25-transparent)\",\n    dragBorderStyle: \"solid\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n    snackbarTextColor: \"var(--light)\",\n    snackbarInfoBackgroundColor: \"var(--color-primary500)\",\n    snackbarSuccessBackgroundColor: \"var(--color-green500)\",\n    snackbarErrorBackgroundColor: \"var(--color-red500)\",\n    snackbarWarningBackgroundColor: \"var(--color-orange500)\",\n    snackbarBorderRadius: \"2px\",\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"0 0 0 4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n    wizardStepIndicatorFutureColor: \"var(--color-blue-grey200)\",\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\", //FIXME: UCL-395\n    fontSize: \"1rem\", //FIXME: UCL-395\n    fontSizeH1: \"2.5rem\",\n    fontSizeH2: \"1.625rem\",\n    fontSizeH3: \"1.5rem\",\n    fontSizeH4: \"1.25rem\",\n    fontSizeSub: \".75rem\",\n    fontSizeCode: \"1rem\",\n    formControlFontSize: \"0.875rem\" //FIXME: UCL-395\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":["BaseStyling","children","properties","defaultProperties","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorBlueGrey25","colorBlueGrey25Transparent","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorLightBlue500","colorLightBlue600","colorOrange500","colorOrange600","colorOrange700","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","colorShadowBlue","colorWhite","colorFocus","colorPrimary","colorSecondary","colorTertiary","defaultPressedColor","defaultHoverColor","defaultLineHeight","defaultBorderRadius","focusBorderRadius","buttonBorderRadius","buttonBorderWidth","buttonFontSize","buttonBorderStyle","buttonFillTextColor","buttonPrimaryDefaultColor","buttonPrimaryHoverColor","buttonPrimaryFocusedColor","buttonPrimaryPressedColor","buttonSecondaryDefaultColor","buttonSecondaryHoverColor","buttonSecondaryFocusedColor","buttonSecondaryPressedColor","buttonWarningDefaultColor","buttonWarningHoverColor","buttonWarningFocusedColor","buttonWarningPressedColor","buttonDangerDefaultColor","buttonDangerHoverColor","buttonDangerFocusedColor","buttonDangerPressedColor","buttonDefaultColor","buttonDefaultHoverColor","buttonDefaultFocusedColor","buttonDefaultPressedColor","buttonOutlineHoverTextColor","checkboxUncheckedHoverColor","checkboxUncheckedPressedColor","checkboxCheckedHoverColor","checkboxCheckedPressedColor","radioHoverBackgroundColor","radioPressedBackgroundColor","radioHoverColor","radioPressedColor","inputBorderRadius","inputBorderWidth","inputBorderWidthFocus","inputBorderStyle","inputBorderColor","inputBackgroundColor","inputHelperTextColor","inputHoverBackgroundColor","inputDisabledBackgroundColor","dragBackgroundColor","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","skeletonBackgroundColor","skeletonAnimationColorRgb","snackbarTextColor","snackbarInfoBackgroundColor","snackbarSuccessBackgroundColor","snackbarErrorBackgroundColor","snackbarWarningBackgroundColor","snackbarBorderRadius","stepperWaitingColor","stepperWaitingHoverColor","stepperWaitingActiveColor","stepperWaitingDisabledColor","stepperCurrentColor","stepperCurrentHoverColor","stepperCurrentActiveColor","stepperCurrentDisabledColor","stepperDoneColor","stepperDoneHoverColor","stepperDoneActiveColor","stepperDoneDisabledColor","stepperErrorColor","stepperErrorHoverColor","stepperErrorActiveColor","stepperErrorDisabledColor","stepperDefaultTextColor","stepperLineColor","stepperLineBoldColor","stepperLineDisabledColor","stepperLineBoldDisabledColor","stepperLabelColor","stepperCaptionColor","stepperCaptionErrorColor","stepperLabelDisabledColor","stepperCaptionDisabledColor","stepperCaptionErrorDisabledColor","bannerBorderRadius","bannerBorderWidth","dataGridRowBackgroundColor","dataGridRowHoverBackgroundColor","progressBarBackgroundColor","tabsBackgroundColor","tabActiveBorderHeight","tabActiveBorderColor","tabActiveTextColor","tablistBorderWidth","tablistBorderStyle","tablistBorderColor","tabTextColor","tabHoverColor","tabPressedColor","toggleBackgroundColor","tooltipBackgroundColor","wizardStepIndicatorFutureColor","contextMenuHoverColor","contextMenuPressedColor","default","success","error","info","disabled","greyedOut","lightGreyBorder","warning","light","fontFamily","fontFamilyCode","fontSizeFormLabel","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeSub","fontSizeCode","formControlFontSize","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","className","ref"],"mappings":"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"}
+{"version":3,"file":"BaseStyling.esm.js","sources":["../../../../../src/components/_BaseStyling_/BaseStyling.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\n/**\n * If you add more CSS variables, and they are a color, make sure to go into /.storybook/addon/src/components/PanelContent.tsx\n * and make sure to add it to the shouldBeColorPicker array!\n */\n\nimport React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from \"react\";\n\ninterface CSSProperties {\n  colorFocus?: string;\n  colorPrimary?: string;\n  colorSuccess?: string;\n  colorWarning?: string;\n  colorDanger?: string;\n  colorPrimary100?: string;\n  colorPrimary300?: string;\n  colorPrimary500?: string;\n  colorPrimary600?: string;\n  colorPrimary700?: string;\n  colorPrimary900?: string;\n  colorBlueGrey100?: string;\n  colorBlueGrey200?: string;\n  colorBlueGrey300?: string;\n  colorBlueGrey400?: string;\n  colorBlueGrey25?: string;\n  colorBlueGrey25Transparent?: string;\n  colorBlueGrey50?: string;\n  colorBlueGrey500?: string;\n  colorBlueGrey700?: string;\n  colorBlueGrey800?: string;\n  colorBlueGrey900?: string;\n  colorGreen100?: string;\n  colorGreen200?: string;\n  colorGreen500?: string;\n  colorGreen600?: string;\n  colorGreen700?: string;\n  colorLightBlue500?: string;\n  colorLightBlue600?: string;\n  colorShadowBlue?: string;\n  colorOrange500?: string;\n  colorOrange600?: string;\n  colorOrange700?: string;\n  colorRed200?: string;\n  colorRed500?: string;\n  colorRed600?: string;\n  colorRed700?: string;\n  colorWhite?: string;\n  colorBlack100?: string;\n  colorBlack20?: string;\n  colorBlack10?: string;\n  defaultPressedColor?: string;\n  defaultHoverColor?: string;\n  defaultLineHeight?: string;\n  focusBorderRadius?: string;\n  buttonBorderRadius?: string;\n  buttonBorderWidth?: string;\n  buttonFontSize?: string;\n  buttonBorderStyle?: string;\n  buttonPrimaryDefaultColor?: string;\n  buttonPrimaryPressedColor?: string;\n  buttonFillTextColor?: string;\n  buttonPrimaryHoverColor?: string;\n  buttonPrimaryFocusedColor?: string;\n  buttonOutlineHoverTextColor?: string;\n  buttonSuccessDefaultColor?: string;\n  buttonSuccessHoverColor?: string;\n  buttonSuccessFocusedColor?: string;\n  buttonSuccessPressedColor?: string;\n  buttonDangerDefaultColor?: string;\n  buttonDangerHoverColor?: string;\n  buttonDangerFocusedColor?: string;\n  buttonDangerPressedColor?: string;\n  buttonWarningDefaultColor?: string;\n  buttonWarningHoverColor?: string;\n  buttonWarningFocusedColor?: string;\n  buttonWarningPressedColor?: string;\n  buttonDefaultColor?: string;\n  buttonDefaultHoverColor?: string;\n  buttonDefaultFocusedColor?: string;\n  buttonDefaultPressedColor?: string;\n  buttonOutlineActiveTextColor?: string;\n  checkboxUncheckedHoverColor?: string;\n  checkboxUncheckedPressedColor?: string;\n  checkboxCheckedHoverColor?: string;\n  checkboxCheckedPressedColor?: string;\n  radioHoverBackgroundColor?: string;\n  radioPressedBackgroundColor?: string;\n  radioHoverColor?: string;\n  radioPressedColor?: string;\n  defaultBorderRadius?: string;\n  inputBorderRadius?: string;\n  inputBorderWidth?: string;\n  inputBorderWidthFocus?: string;\n  inputBorderStyle?: string;\n  inputBorderColor?: string;\n  inputBackgroundColor?: string;\n  inputHelperTextColor?: string;\n  inputHoverBackgroundColor?: string;\n  inputDisabledBackgroundColor?: string;\n  dragBackgroundColor?: string;\n  dragBorderStyle?: string;\n  modalShadowColor?: string;\n  modalBackgroundColor?: string;\n  modalBackdropColor?: string;\n  skeletonBackgroundColor?: string;\n  skeletonAnimationColorRgb?: string;\n  snackbarTextColor?: string;\n  snackbarInfoBackgroundColor?: string;\n  snackbarSuccessBackgroundColor?: string;\n  snackbarErrorBackgroundColor?: string;\n  snackbarWarningBackgroundColor?: string;\n  snackbarBorderRadius?: string;\n  stepperWaitingColor?: string;\n  stepperWaitingHoverColor?: string;\n  stepperWaitingActiveColor?: string;\n  stepperWaitingDisabledColor?: string;\n  stepperCurrentColor?: string;\n  stepperCurrentHoverColor?: string;\n  stepperCurrentActiveColor?: string;\n  stepperCurrentDisabledColor?: string;\n  stepperDoneColor?: string;\n  stepperDoneHoverColor?: string;\n  stepperDoneActiveColor?: string;\n  stepperDoneDisabledColor?: string;\n  stepperErrorColor?: string;\n  stepperErrorHoverColor?: string;\n  stepperErrorActiveColor?: string;\n  stepperErrorDisabledColor?: string;\n  stepperDefaultTextColor?: string;\n  stepperLineColor?: string;\n  stepperLineBoldColor?: string;\n  stepperLineDisabledColor?: string;\n  stepperLineBoldDisabledColor?: string;\n  stepperLabelColor?: string;\n  stepperCaptionColor?: string;\n  stepperCaptionErrorColor?: string;\n  stepperLabelDisabledColor?: string;\n  stepperCaptionDisabledColor?: string;\n  stepperCaptionErrorDisabledColor?: string;\n  bannerBorderRadius?: string;\n  bannerBorderWidth?: string;\n  dataGridRowBackgroundColor?: string;\n  dataGridRowHoverBackgroundColor?: string;\n  progressBarBackgroundColor?: string;\n  tabsBackgroundColor?: string;\n  tabActiveBorderHeight?: string;\n  tabActiveBorderColor?: string;\n  tabActiveTextColor?: string;\n  tablistBorderWidth?: string;\n  tablistBorderStyle?: string;\n  tablistBorderColor?: string;\n  tabTextColor?: string;\n  tabHoverColor?: string;\n  tabPressedColor?: string;\n  toggleBackgroundColor?: string;\n  tooltipBackgroundColor?: string;\n  wizardStepIndicatorFutureColor?: string;\n  contextMenuHoverColor?: string;\n  contextMenuPressedColor?: string;\n  default?: string;\n  success?: string;\n  error?: string;\n  info?: string;\n  disabled?: string;\n  greyedOut?: string;\n  lightGreyBorder?: string;\n  warning?: string;\n  light?: string;\n  fontFamily?: string;\n  fontFamilyCode?: string;\n  fontSizeFormLabel?: string;\n  fontSize?: string;\n  fontSizeH1?: string;\n  fontSizeH2?: string;\n  fontSizeH3?: string;\n  fontSizeH4?: string;\n  fontSizeSub?: string;\n  fontSizeCode?: string;\n  formControlFontSize?: string;\n}\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactElement[] | ReactElement | string[] | string | number[] | number;\n  properties?: CSSProperties;\n}\n\nexport const BaseStyling = ({ children, properties = {} }: Props) => {\n  const defaultProperties: CSSProperties = {\n    colorPrimary100: \"#CDD0EA\",\n    colorPrimary300: \"#6871BF\",\n    colorPrimary500: \"#041295\",\n    colorPrimary600: \"#030F77\",\n    colorPrimary700: \"#020B59\",\n    colorPrimary900: \"#01041E\",\n    colorBlueGrey25: \"#F7F7F9\",\n    colorBlueGrey25Transparent: \"rgba(247, 247, 249, .8)\",\n    colorBlueGrey50: \"#EEEFF3\",\n    colorBlueGrey100: \"#DEDEE6\",\n    colorBlueGrey200: \"#BCBECE\",\n    colorBlueGrey300: \"#9A9DB5\",\n    colorBlueGrey400: \"#797D9C\",\n    colorBlueGrey500: \"#5D607E\",\n    colorBlueGrey700: \"#383A4B\",\n    colorBlueGrey800: \"#252733\",\n    colorBlueGrey900: \"#131319\",\n    colorGreen100: \"#D1E6DA\",\n    colorGreen200: \"#A2CDB4\",\n    colorGreen500: \"#178244\",\n    colorGreen600: \"#126836\",\n    colorGreen700: \"#0E4E29\",\n    colorLightBlue500: \"#00BCDD\",\n    colorLightBlue600: \"#0096B1\",\n    colorOrange500: \"#E07900\",\n    colorOrange600: \"#B36100\",\n    colorOrange700: \"#864900\",\n    colorRed200: \"#F3A599\",\n    colorRed500: \"#E01E00\",\n    colorRed600: \"#B31800\",\n    colorRed700: \"#861200\",\n    colorBlack100: \"#000000\",\n    colorBlack20: \"rgba(0, 0, 0, 0.2)\",\n    colorBlack10: \"rgba(0, 0, 0, 0.1)\",\n    colorShadowBlue: \"#7078C3\",\n    colorWhite: \"#FFFFFF\",\n    colorFocus: \"var(--color-primary300)\",\n    colorPrimary: \"var(--color-primary500)\",\n    colorSuccess: \"var(--color-green500)\",\n    colorWarning: \"var(--color-orange500)\",\n    colorDanger: \"var(--color-red500)\",\n    defaultPressedColor: \"var(--color-blue-grey100)\",\n    defaultHoverColor: \"var(--color-blue-grey25)\",\n    defaultLineHeight: \"1.5\", //FIXME: UCL-395\n    defaultBorderRadius: \"0.25rem\",\n    focusBorderRadius: \"0.125rem\",\n    buttonBorderRadius: \"0.125rem\",\n    buttonBorderWidth: \"2px\",\n    buttonFontSize: \"0.875rem\",\n    buttonBorderStyle: \"solid\",\n    buttonFillTextColor: \"var(--light)\",\n    buttonPrimaryDefaultColor: \"var(--color-primary500)\",\n    buttonPrimaryHoverColor: \"var(--color-primary600)\",\n    buttonPrimaryFocusedColor: \"var(--color-primary500)\",\n    buttonPrimaryPressedColor: \"var(--color-primary700)\",\n    buttonSuccessDefaultColor: \"var(--color-green500)\",\n    buttonSuccessHoverColor: \"var(--color-green600)\",\n    buttonSuccessFocusedColor: \"var(--color-green500)\",\n    buttonSuccessPressedColor: \"var(--color-green700)\",\n    buttonDangerDefaultColor: \"var(--color-red500)\",\n    buttonDangerHoverColor: \"var(--color-red600)\",\n    buttonDangerFocusedColor: \"var(--color-red500)\",\n    buttonDangerPressedColor: \"var(--color-red700)\",\n    buttonWarningDefaultColor: \"var(--color-orange500)\",\n    buttonWarningHoverColor: \"var(--color-orange600)\",\n    buttonWarningFocusedColor: \"var(--color-orange500)\",\n    buttonWarningPressedColor: \"var(--color-orange700)\",\n    buttonDefaultColor: \"var(--color-blue-grey700)\",\n    buttonDefaultHoverColor: \"var(--color-blue-grey800)\",\n    buttonDefaultFocusedColor: \"var(--color-blue-grey700)\",\n    buttonDefaultPressedColor: \"var(--color-blue-grey800)\",\n    buttonOutlineHoverTextColor: \"var(--color-primary600)\",\n    checkboxUncheckedHoverColor: \"var(--color-blue-grey50)\",\n    checkboxUncheckedPressedColor: \"var(--default-pressed-color)\",\n    checkboxCheckedHoverColor: \"var(--color-primary600)\",\n    checkboxCheckedPressedColor: \"var(--color-primary700)\",\n    radioHoverBackgroundColor: \"var(--color-blue-grey50)\",\n    radioPressedBackgroundColor: \"var(--default-pressed-color)\",\n    radioHoverColor: \"var(--color-primary600)\",\n    radioPressedColor: \"var(--color-primary700)\",\n    inputBorderRadius: \"2px\",\n    inputBorderWidth: \"1px\",\n    inputBorderWidthFocus: \"1px\",\n    inputBorderStyle: \"solid\",\n    inputBorderColor: \"var(--color-blue-grey500)\",\n    inputBackgroundColor: \"var(--light)\",\n    inputHelperTextColor: \"var(--color-blue-grey500)\",\n    inputHoverBackgroundColor: \"var(--default-hover-color)\",\n    inputDisabledBackgroundColor: \"var(--input-hover-background-color)\",\n    dragBackgroundColor: \"var(--color-blue-grey25-transparent)\",\n    dragBorderStyle: \"solid\",\n    modalShadowColor: \"rgba(0, 0, 0, 0.16)\",\n    modalBackgroundColor: \"var(--light)\",\n    modalBackdropColor: \"var(--default)\",\n    skeletonBackgroundColor: \"var(--disabled)\",\n    skeletonAnimationColorRgb: \"255, 255, 255\",\n    snackbarTextColor: \"var(--light)\",\n    snackbarInfoBackgroundColor: \"var(--color-primary500)\",\n    snackbarSuccessBackgroundColor: \"var(--color-green500)\",\n    snackbarErrorBackgroundColor: \"var(--color-red500)\",\n    snackbarWarningBackgroundColor: \"var(--color-orange500)\",\n    snackbarBorderRadius: \"2px\",\n    stepperWaitingColor: \"var(--color-blue-grey200)\",\n    stepperWaitingHoverColor: \"var(--color-blue-grey300)\",\n    stepperWaitingActiveColor: \"var(--color-blue-grey400)\",\n    stepperWaitingDisabledColor: \"var(--color-blue-grey100)\",\n    stepperCurrentColor: \"var(--color-primary500)\",\n    stepperCurrentHoverColor: \"var(--color-primary600)\",\n    stepperCurrentActiveColor: \"var(--color-primary700)\",\n    stepperCurrentDisabledColor: \"var(--color-primary100)\",\n    stepperDoneColor: \"var(--color-green500)\",\n    stepperDoneHoverColor: \"var(--color-green600)\",\n    stepperDoneActiveColor: \"var(--color-green700)\",\n    stepperDoneDisabledColor: \"var(--color-green200)\",\n    stepperErrorColor: \"var(--color-red500)\",\n    stepperErrorHoverColor: \"var(--color-red600)\",\n    stepperErrorActiveColor: \"var(--color-red700)\",\n    stepperErrorDisabledColor: \"var(--color-red200)\",\n    stepperDefaultTextColor: \"var(--color-white)\",\n    stepperLineColor: \"var(--color-blue-grey300)\",\n    stepperLineBoldColor: \"var(--color-blue-grey700)\",\n    stepperLineDisabledColor: \"var(--color-blue-grey100)\",\n    stepperLineBoldDisabledColor: \"var(--color-blue-grey300)\",\n    stepperLabelColor: \"var(--color-blue-grey900)\",\n    stepperCaptionColor: \"var(--color-blue-grey500)\",\n    stepperCaptionErrorColor: \"var(--color-red500)\",\n    stepperLabelDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionDisabledColor: \"var(--color-blue-grey400)\",\n    stepperCaptionErrorDisabledColor: \"var(--color-red200)\",\n    bannerBorderRadius: \"2px\",\n    bannerBorderWidth: \"0 0 0 4px\",\n    dataGridRowBackgroundColor: \"transparent\",\n    dataGridRowHoverBackgroundColor: \"var(--default-hover-color)\",\n    progressBarBackgroundColor: \"var(--disabled)\",\n    tabsBackgroundColor: \"var(--light)\",\n    tabActiveBorderHeight: \"0.25rem\",\n    tabActiveBorderColor: \"var(--color-primary)\",\n    tabActiveTextColor: \"var(--color-primary)\",\n    tablistBorderWidth: \"0.0625rem\",\n    tablistBorderStyle: \"solid\",\n    tablistBorderColor: \"var(--color-blue-grey100)\",\n    tabTextColor: \"var(--color-blue-grey900)\",\n    tabHoverColor: \"var(--default-hover-color)\",\n    tabPressedColor: \"var(--default-pressed-color)\",\n    toggleBackgroundColor: \"var(--color-blue-grey100)\",\n    tooltipBackgroundColor: \"var(--default)\",\n    wizardStepIndicatorFutureColor: \"var(--color-blue-grey200)\",\n    contextMenuHoverColor: \"var(--default-hover-color)\",\n    contextMenuPressedColor: \"var(--default-pressed-color)\",\n    default: \"var(--color-blue-grey900)\",\n    success: \"var(--color-green500)\",\n    error: \"var(--color-red500)\",\n    info: \"var(--color-primary500)\",\n    disabled: \"var(--color-blue-grey100)\",\n    greyedOut: \"var(--color-blue-grey400)\",\n    lightGreyBorder: \"var(--color-blue-grey100)\",\n    warning: \"var(--color-orange500)\",\n    light: \"var(--color-white)\",\n    fontFamily: \"Roboto, sans-serif\",\n    fontFamilyCode: \"'Roboto Mono', monospace\",\n    fontSizeFormLabel: \"0.875rem\", //FIXME: UCL-395\n    fontSize: \"1rem\", //FIXME: UCL-395\n    fontSizeH1: \"2.5rem\",\n    fontSizeH2: \"1.625rem\",\n    fontSizeH3: \"1.5rem\",\n    fontSizeH4: \"1.25rem\",\n    fontSizeSub: \".75rem\",\n    fontSizeCode: \"1rem\",\n    formControlFontSize: \"0.875rem\" //FIXME: UCL-395\n  };\n\n  /** We need a loading state, because otherwise you see the colors flash from the default to the possible overridden ones. */\n  const [isLoading, setIsLoading] = useState(true);\n  const baseStylingWrapper = useRef(null);\n\n  const setCSSProperties = (CSSPropertiesObject: CSSProperties) => {\n    for (const [key, value] of Object.entries(CSSPropertiesObject)) {\n      const formattedPropertyName = key.replace(/([A-Z])/g, val => `-${val.toLowerCase()}`);\n      (baseStylingWrapper.current! as HTMLElement).style.setProperty(\n        `--${formattedPropertyName}`,\n        value\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (Object.keys(properties).length !== 0 && baseStylingWrapper.current) {\n      const mergedState = { ...defaultProperties, ...properties };\n      setCSSProperties(mergedState);\n    } else if (baseStylingWrapper.current) {\n      setCSSProperties(defaultProperties);\n    }\n    setIsLoading(false);\n  }, [properties, baseStylingWrapper.current]);\n\n  return (\n    <div className=\"basestyling-wrapper\" ref={baseStylingWrapper}>\n      {!isLoading ? children : null}\n    </div>\n  );\n};\n"],"names":["BaseStyling","children","properties","defaultProperties","colorPrimary100","colorPrimary300","colorPrimary500","colorPrimary600","colorPrimary700","colorPrimary900","colorBlueGrey25","colorBlueGrey25Transparent","colorBlueGrey50","colorBlueGrey100","colorBlueGrey200","colorBlueGrey300","colorBlueGrey400","colorBlueGrey500","colorBlueGrey700","colorBlueGrey800","colorBlueGrey900","colorGreen100","colorGreen200","colorGreen500","colorGreen600","colorGreen700","colorLightBlue500","colorLightBlue600","colorOrange500","colorOrange600","colorOrange700","colorRed200","colorRed500","colorRed600","colorRed700","colorBlack100","colorBlack20","colorBlack10","colorShadowBlue","colorWhite","colorFocus","colorPrimary","colorSuccess","colorWarning","colorDanger","defaultPressedColor","defaultHoverColor","defaultLineHeight","defaultBorderRadius","focusBorderRadius","buttonBorderRadius","buttonBorderWidth","buttonFontSize","buttonBorderStyle","buttonFillTextColor","buttonPrimaryDefaultColor","buttonPrimaryHoverColor","buttonPrimaryFocusedColor","buttonPrimaryPressedColor","buttonSuccessDefaultColor","buttonSuccessHoverColor","buttonSuccessFocusedColor","buttonSuccessPressedColor","buttonDangerDefaultColor","buttonDangerHoverColor","buttonDangerFocusedColor","buttonDangerPressedColor","buttonWarningDefaultColor","buttonWarningHoverColor","buttonWarningFocusedColor","buttonWarningPressedColor","buttonDefaultColor","buttonDefaultHoverColor","buttonDefaultFocusedColor","buttonDefaultPressedColor","buttonOutlineHoverTextColor","checkboxUncheckedHoverColor","checkboxUncheckedPressedColor","checkboxCheckedHoverColor","checkboxCheckedPressedColor","radioHoverBackgroundColor","radioPressedBackgroundColor","radioHoverColor","radioPressedColor","inputBorderRadius","inputBorderWidth","inputBorderWidthFocus","inputBorderStyle","inputBorderColor","inputBackgroundColor","inputHelperTextColor","inputHoverBackgroundColor","inputDisabledBackgroundColor","dragBackgroundColor","dragBorderStyle","modalShadowColor","modalBackgroundColor","modalBackdropColor","skeletonBackgroundColor","skeletonAnimationColorRgb","snackbarTextColor","snackbarInfoBackgroundColor","snackbarSuccessBackgroundColor","snackbarErrorBackgroundColor","snackbarWarningBackgroundColor","snackbarBorderRadius","stepperWaitingColor","stepperWaitingHoverColor","stepperWaitingActiveColor","stepperWaitingDisabledColor","stepperCurrentColor","stepperCurrentHoverColor","stepperCurrentActiveColor","stepperCurrentDisabledColor","stepperDoneColor","stepperDoneHoverColor","stepperDoneActiveColor","stepperDoneDisabledColor","stepperErrorColor","stepperErrorHoverColor","stepperErrorActiveColor","stepperErrorDisabledColor","stepperDefaultTextColor","stepperLineColor","stepperLineBoldColor","stepperLineDisabledColor","stepperLineBoldDisabledColor","stepperLabelColor","stepperCaptionColor","stepperCaptionErrorColor","stepperLabelDisabledColor","stepperCaptionDisabledColor","stepperCaptionErrorDisabledColor","bannerBorderRadius","bannerBorderWidth","dataGridRowBackgroundColor","dataGridRowHoverBackgroundColor","progressBarBackgroundColor","tabsBackgroundColor","tabActiveBorderHeight","tabActiveBorderColor","tabActiveTextColor","tablistBorderWidth","tablistBorderStyle","tablistBorderColor","tabTextColor","tabHoverColor","tabPressedColor","toggleBackgroundColor","tooltipBackgroundColor","wizardStepIndicatorFutureColor","contextMenuHoverColor","contextMenuPressedColor","default","success","error","info","disabled","greyedOut","lightGreyBorder","warning","light","fontFamily","fontFamilyCode","fontSizeFormLabel","fontSize","fontSizeH1","fontSizeH2","fontSizeH3","fontSizeH4","fontSizeSub","fontSizeCode","formControlFontSize","isLoading","setIsLoading","useState","baseStylingWrapper","useRef","setCSSProperties","CSSPropertiesObject","key","value","Object","entries","formattedPropertyName","replace","val","toLowerCase","current","style","setProperty","useEffect","keys","length","mergedState","React","className","ref"],"mappings":"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"}

package/dist/esm/src/components/Button/BaseButton.d.ts

@@ -3,6 +3,6 @@ export interface Props extends ComponentPropsWithRef<"button"> {
     type?: "submit" | "button" | "reset";
     disabled?: boolean;
     loading?: boolean;
-    color?: "primary" | "secondary" | "warning" | "danger" | "default";
+    color?: "primary" | "danger" | "default" | "success" | "warning";
 }
 export declare const BaseButton: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/src/components/Icon/Icon.d.ts

@@ -69,7 +69,10 @@ export declare enum Icons {
     Warning = "warning",
     FileOutline = "file-outline",
     FileUpload = "file-upload-outline",
-    FileDownload = "file-download-outline"
+    FileDownload = "file-download-outline",
+    UploadOutline = "upload-outline",
+    ReplyOutline = "reply-outline",
+    SaveOutline = "save-outline"
 }
 type Tag = "span" | "div" | "i";
 export interface Props extends ComponentPropsWithRef<"div"> {

package/dist/esm/src/components/Link/Link.d.ts

@@ -3,7 +3,7 @@ import { IconProps, Icon } from "../../index";
 export type AnchorType = "external" | "internal" | "download";
 export interface Props extends ComponentPropsWithRef<"a"> {
     prefixIcon?: ReactElement<IconProps, typeof Icon>;
-    color?: "primary" | "secondary" | "tertiary";
+    color?: "primary" | "success" | "danger" | "warning";
     display?: "link" | "button";
     buttonVariant?: "outline" | "text" | "fill";
     type?: AnchorType;

package/dist/esm/src/components/Notifications/BaseModal/useRepeatFocus.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+/**
+ * @description This is a hook that will make sure that when a modal is open and the user tabs through the it,
+ * the focus will be repeated and the user will not lose their entire focusable element to an element in the background
+ * that is being blocked by the modal.
+ */
+export declare const useRepeatFocus: (ref: RefObject<HTMLDivElement>) => void;

package/dist/esm/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { SnackbarOptionsProps } from "../interfaces";
+import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 interface SnackbarContextProps {
-    enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueSuccessSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueWarningSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-    enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+    enqueueSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
+    enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
     setSnackbarHeight: (id: string, height: number) => void;
     snackbars: Item[];
 }

package/dist/esm/src/components/Notifications/Snackbar/interfaces.d.ts

@@ -10,3 +10,9 @@ export interface SnackbarOptionsProps {
     duration?: number;
     onClose?: () => void;
 }
+export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
+    title?: string;
+    content?: string;
+}
+export type DeprecatedEnqueueSnackbarType = (propsOrTitle: EnqueueSnackbarProps | string | undefined, content?: string, options?: SnackbarOptionsProps) => void;
+export declare function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps;

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.d.ts

@@ -1,6 +1,6 @@
 export declare const useSnackbar: () => {
-    enqueueWarningSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueErrorSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueSuccessSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
-    enqueueSnackbar: (title?: string | undefined, content?: string | undefined, options?: import("./interfaces").SnackbarOptionsProps | undefined) => void;
+    enqueueWarningSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueErrorSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueSuccessSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
+    enqueueSnackbar: import("./interfaces").DeprecatedEnqueueSnackbarType;
 };

package/dist/esm/src/components/Notifications/Snackbar/useSnackbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/components/Stepper/Step.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from "react";
 export type StepStatus = "waiting" | "current" | "done" | "error";
-export interface Props extends ComponentPropsWithRef<"button"> {
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
     status: StepStatus;
     label: string;
     caption?: string;
@@ -8,6 +8,8 @@ export interface Props extends ComponentPropsWithRef<"button"> {
     lastStep?: boolean;
     disabled?: boolean;
     direction?: "horizontal" | "vertical";
+    textPosition?: "bottom" | "right";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
 }
-export declare const StepComponent: ForwardRefRenderFunction<HTMLButtonElement, Props>;
-export declare const Step: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const StepComponent: ForwardRefRenderFunction<HTMLDivElement, Props>;
+export declare const Step: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/Stepper/Stepper.d.ts

@@ -3,5 +3,7 @@ import { Props as StepProps } from "./Step";
 export interface Props extends ComponentPropsWithRef<"div"> {
     steps: StepProps[];
     direction: "horizontal" | "vertical";
+    textPosition?: "bottom" | "right";
 }
-export declare const Stepper: ({ steps, direction, ...rest }: Props) => React.JSX.Element;
+export declare const gapBetweenStepsInRem = 0.5;
+export declare const Stepper: ({ steps, direction, textPosition, className, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/components/Wizard/WizardActions/WizardActions.d.ts

@@ -19,4 +19,7 @@ export interface Props extends React.HTMLProps<HTMLDivElement> {
         };
     };
 }
+/**
+ * @deprecated
+ */
 export declare const WizardActions: ({ actions }: Props) => React.JSX.Element;

package/dist/esm/src/components/Wizard/WizardStateProvider.d.ts

@@ -8,5 +8,8 @@ export interface Props {
     initialState: WizardStateType;
     children?: React.ReactNode;
 }
+/**
+ * @deprecated
+ */
 declare const WizardStateProvider: ({ children, initialState }: Props) => React.JSX.Element;
 export { WizardStateProvider, WizardStateContext };

package/dist/esm/src/components/Wizard/WizardSteps/WizardSteps.d.ts

@@ -2,4 +2,7 @@ import React, { ComponentPropsWithRef } from "react";
 export interface Props extends ComponentPropsWithRef<"div"> {
     onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
 }
+/**
+ * @deprecated
+ */
 export declare const WizardSteps: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/src/components/_BaseStyling_/BaseStyling.d.ts

@@ -6,8 +6,9 @@ import React, { HTMLAttributes, ReactElement } from "react";
 interface CSSProperties {
     colorFocus?: string;
     colorPrimary?: string;
-    colorSecondary?: string;
-    colorTertiary?: string;
+    colorSuccess?: string;
+    colorWarning?: string;
+    colorDanger?: string;
     colorPrimary100?: string;
     colorPrimary300?: string;
     colorPrimary500?: string;
@@ -58,18 +59,18 @@ interface CSSProperties {
     buttonPrimaryHoverColor?: string;
     buttonPrimaryFocusedColor?: string;
     buttonOutlineHoverTextColor?: string;
-    buttonSecondaryDefaultColor?: string;
-    buttonSecondaryHoverColor?: string;
-    buttonSecondaryFocusedColor?: string;
-    buttonSecondaryPressedColor?: string;
-    buttonWarningDefaultColor?: string;
-    buttonWarningHoverColor?: string;
-    buttonWarningFocusedColor?: string;
-    buttonWarningPressedColor?: string;
+    buttonSuccessDefaultColor?: string;
+    buttonSuccessHoverColor?: string;
+    buttonSuccessFocusedColor?: string;
+    buttonSuccessPressedColor?: string;
     buttonDangerDefaultColor?: string;
     buttonDangerHoverColor?: string;
     buttonDangerFocusedColor?: string;
     buttonDangerPressedColor?: string;
+    buttonWarningDefaultColor?: string;
+    buttonWarningHoverColor?: string;
+    buttonWarningFocusedColor?: string;
+    buttonWarningPressedColor?: string;
     buttonDefaultColor?: string;
     buttonDefaultHoverColor?: string;
     buttonDefaultFocusedColor?: string;

package/dist/esm/src/index.d.ts

@@ -37,6 +37,7 @@ export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";
 export type { Props as StatusIndicatorProps } from "./components/StatusIndicator/StatusIndicator";
 export { Stepper } from "./components/Stepper/Stepper";
 export type { Props as StepperProps } from "./components/Stepper/Stepper";
+export type { Props as StepProps } from "./components/Stepper/Step";
 export { Pagination } from "./components/Pagination/Pagination";
 export type { Props as PaginationProps, PageChangeLabels, PaginationTranslations, PageSize } from "./components/Pagination/Pagination";
 export { useRepeater } from "./hooks/useRepeater";

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",

package/src/components/Button/BaseButton.tsx

@@ -22,7 +22,7 @@ export interface Props extends ComponentPropsWithRef<"button"> {
   type?: "submit" | "button" | "reset";
   disabled?: boolean;
   loading?: boolean;
-  color?: "primary" | "secondary" | "warning" | "danger" | "default";
+  color?: "primary" | "danger" | "default" | "success" | "warning";
 }
 
 const BaseButtonComponent: ForwardRefRenderFunction<HTMLButtonElement, Props> = (

package/src/components/Button/Button.module.scss

@@ -49,17 +49,9 @@
 
     width: 1.5rem;
     margin-right: 0.25rem;
-  }
-}
-
-@media only screen and (min-width: 30em) {
-  .has-icon {
-    &.start-icon {
-      padding-left: 1rem;
-    }
 
-    &.end-icon {
-      padding-right: 1rem;
+    span {
+      font-size: 1rem;
     }
   }
 }

package/src/components/Button/Button.test.tsx

@@ -84,31 +84,43 @@ describe("Button should render", () => {
 describe("Different variants of the button", () => {
   it('should have a class of "primary"', () => {
     const { button } = createButton();
+
     expect(button.classList.contains("primary")).toBe(true);
   });
 
-  it('should have a class of "secondary"', () => {
-    const { button } = createButton(defaultParams => ({ ...defaultParams, color: "secondary" }));
-    expect(button.classList.contains("secondary")).toBe(true);
+  it('should have a class of "success"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, color: "success" }));
+
+    expect(button.classList.contains("success")).toBe(true);
+  });
+
+  it('should have a class of "danger"', () => {
+    const { button } = createButton(defaultParams => ({ ...defaultParams, color: "danger" }));
+
+    expect(button.classList.contains("danger")).toBe(true);
   });
 
   it('should have a class of "warning"', () => {
     const { button } = createButton(defaultParams => ({ ...defaultParams, color: "warning" }));
+
     expect(button.classList.contains("warning")).toBe(true);
   });
 
   it('should have a class of "fill"', () => {
     const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "fill" }));
+
     expect(button.classList.contains("fill")).toBe(true);
   });
 
   it('should have a class of "outline"', () => {
     const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "outline" }));
+
     expect(button.classList.contains("outline")).toBe(true);
   });
 
   it('should have a class of "text"', () => {
     const { button } = createButton(defaultParams => ({ ...defaultParams, variant: "text" }));
+
     expect(button.classList.contains("text")).toBe(true);
   });
 });

package/src/components/Button/IconButton.test.tsx

@@ -80,22 +80,6 @@ describe("Different variants of the button", () => {
     expect(iconButton.classList.contains("primary")).toBe(true);
   });
 
-  it('should have a class of "secondary"', () => {
-    const { iconButton } = createIconButton(defaultParams => ({
-      ...defaultParams,
-      color: "secondary"
-    }));
-    expect(iconButton.classList.contains("secondary")).toBe(true);
-  });
-
-  it('should have a class of "warning"', () => {
-    const { iconButton } = createIconButton(defaultParams => ({
-      ...defaultParams,
-      color: "warning"
-    }));
-    expect(iconButton.classList.contains("warning")).toBe(true);
-  });
-
   it('should have a class of "fill"', () => {
     const { iconButton } = createIconButton(defaultParams => ({
       ...defaultParams,

package/src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -76,7 +76,11 @@ const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, P
     >
       {open &&
         createPortal(
-          <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
+          <div
+            aria-hidden="true"
+            className={classes["backdrop"]}
+            onClick={handleBackdropClick}
+          ></div>,
           domRoot
         )}
       {open && (

package/src/components/Form/Radio/Radio.tsx

@@ -61,7 +61,9 @@ const RadioComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     parentHelperId
   });
 
-  const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent) => {
+  const onChangeHandler = (
+    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent
+  ) => {
     if (disabled) {
       return;
     }

package/src/components/Form/Select/Option.tsx

@@ -83,7 +83,7 @@ const OptionComponent: ForwardRefRenderFunction<HTMLLIElement, Props> = (
         disabled ? classes.disabled : ""
       } ${className ?? ""}`}
       onClick={onSelectHandler}
-      onKeyDownCapture={event => {
+      onKeyDown={event => {
         if (event.code === "Enter") {
           event.stopPropagation();
           event.preventDefault();

package/src/components/Icon/Icon.module.scss

@@ -45,6 +45,18 @@
   font-size: 0.875rem;
 }
 
+.icon-save-outline:before {
+  content: "\e947";
+  @include fontProperties();
+}
+.icon-reply-outline:before {
+  content: "\e946";
+  @include fontProperties();
+}
+.icon-upload-outline:before {
+  content: "\e945";
+  @include fontProperties();
+}
 .icon-home-filled:before {
   content: "\e940";
   @include fontProperties();

package/src/components/Icon/Icon.tsx

@@ -87,7 +87,10 @@ export enum Icons {
   Warning = "warning",
   FileOutline = "file-outline",
   FileUpload = "file-upload-outline",
-  FileDownload = "file-download-outline"
+  FileDownload = "file-download-outline",
+  UploadOutline = "upload-outline",
+  ReplyOutline = "reply-outline",
+  SaveOutline = "save-outline"
 }
 
 type Tag = "span" | "div" | "i";

package/src/components/Link/Link.module.scss

@@ -41,16 +41,24 @@
     }
   }
 
-  &.secondary {
-    color: var(--color-secondary);
+  &.success {
+    color: var(--color-success);
 
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);
     }
   }
 
-  &.tertiary {
-    color: var(--color-tertiary);
+  &.danger {
+    color: var(--color-danger);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.warning {
+    color: var(--color-warning);
 
     &:focus-visible {
       outline: 0.5px dashed var(--color-primary);

package/src/components/Link/Link.test.tsx

@@ -184,14 +184,20 @@ describe("colors", () => {
   });
 
   it("should be color secondary", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "secondary" }));
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "success" }));
 
-    expect(link).toHaveStyle({ color: "var(--color-secondary)" });
+    expect(link).toHaveStyle({ color: "var(--color-success)" });
   });
 
-  it("should be color tertiary", () => {
-    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "tertiary" }));
+  it("should be color danger", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "danger" }));
 
-    expect(link).toHaveStyle({ color: "var(--color-tertiary)" });
+    expect(link).toHaveStyle({ color: "var(--color-danger)" });
+  });
+
+  it("should be color warning", () => {
+    const { link } = createLink(defaultParams => ({ ...defaultParams, color: "warning" }));
+
+    expect(link).toHaveStyle({ color: "var(--color-warning)" });
   });
 });

package/src/components/Link/Link.tsx

@@ -27,7 +27,7 @@ export type AnchorType = "external" | "internal" | "download";
 
 export interface Props extends ComponentPropsWithRef<"a"> {
   prefixIcon?: ReactElement<IconProps, typeof Icon>;
-  color?: "primary" | "secondary" | "tertiary";
+  color?: "primary" | "success" | "danger" | "warning";
   display?: "link" | "button";
   buttonVariant?: "outline" | "text" | "fill";
   type?: AnchorType;

package/src/components/Notifications/BaseModal/BaseModal.test.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef } from "react";
 import { BaseModal, Props } from "./BaseModal";
 import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
 
 const classNames = ["class11", "class12"];
 const containerClassNames = ["class21", "class22"];
@@ -36,7 +37,17 @@ const createBaseModal = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const queries = render(
+    <BaseModal {...parameters} data-testid="BaseModal">
+      <button>Button 1</button>
+      <button>Button 2</button>
+      <button>Button 3</button>
+      <span>{defaultParams.children}</span>
+      <button>Button 4</button>
+      <button>Button 5</button>
+      <button>Button 6</button>
+    </BaseModal>
+  );
   const slideInModal = queries.getByTestId("BaseModal");
 
   return {
@@ -130,6 +141,30 @@ describe("BaseModal", () => {
     fireEvent.keyDown(modal, { key: "Escape" });
     expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
   });
+
+  it("should repeat focus back to the first button when tabbing through the modal", async () => {
+    const { getByText } = createBaseModal();
+
+    const firstButton = getByText("Button 1");
+    const lastButton = getByText("Button 6");
+
+    await act(() => {
+      firstButton.focus();
+    });
+
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    expect(firstButton).toHaveFocus();
+
+    await userEvent.tab({ shift: true });
+
+    expect(lastButton).toHaveFocus();
+  });
 });
 
 describe("ref should work", () => {