@onewelcome/react-lib-components 5.2.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/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/_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/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "5.2.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/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/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -17,7 +17,7 @@
 @use "../../../../mixins.module.scss";
 
 .snackbar {
-  padding: 0.5rem 1rem;
+  padding: 1rem;
   border-radius: var(--snackbar-border-radius);
   display: flex;
   gap: 0.5rem;
@@ -27,11 +27,6 @@
   @include mixins.transition(height, 0.2s, ease-in-out);
   flex-grow: 0;
 
-  &.has-title {
-    align-items: flex-start;
-    padding: 1rem;
-  }
-
   &.info {
     background-color: var(--snackbar-info-background-color);
   }
@@ -57,6 +52,7 @@
     align-self: center;
     width: 2.5rem;
     height: 2.5rem;
+    margin: -0.5rem 0;
     flex-shrink: 0;
     border: 0;
 
@@ -77,39 +73,36 @@
   .icon {
     color: var(--snackbar-text-color);
     font-size: 1rem;
-    line-height: var(--default-line-height);
-    display: flex;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
   }
 
   .title {
     color: var(--snackbar-text-color);
     flex: 1;
     font-size: 0.875rem;
-    line-height: var(--default-line-height);
+    line-height: 1.25rem;
     margin-bottom: 0.25rem;
-    margin-top: -2.5px;
     display: block;
   }
 
-  .content-wrapper {
+  .outer-content-wrapper {
+    display: flex;
+    gap: 0.5rem;
     flex-grow: 1;
   }
 
-  &.has-title .content-wrapper {
-    width: 12.5rem;
-  }
-
-  @media screen and (min-width: 37.5em) {
-    &:not(.has-title) .content {
-      white-space: nowrap;
-    }
+  .content-wrapper {
+    flex-grow: 1;
   }
 
   .content {
     color: var(--snackbar-text-color);
     font-size: 0.875rem;
+    line-height: 1.25rem;
     margin-bottom: 0;
-    line-height: var(--default-line-height);
   }
 
   .actions {
@@ -125,7 +118,7 @@
     font-size: 0.875rem;
     line-height: var(--button-font-size);
     font-weight: 400;
-    margin: 0;
+    margin: -0.5rem 0;
     padding: 0.625rem 1.25rem;
     cursor: pointer;
     transition:

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -22,25 +22,27 @@ import userEvent from "@testing-library/user-event";
 const initParams: Props = {
   id: "id",
   title: "title",
+  content: "content",
   duration: 1,
   variant: "success",
   closeButtonTitle: "close",
   onClose: jest.fn()
 };
 
-describe("SnackbarItem", () => {
-  it("renders without crashing", () => {
+describe("<SnackbarItem />", () => {
+  it("should render without crashing", () => {
     const { container } = render(<SnackbarItem {...initParams} />);
 
-    expect(container).toHaveTextContent(initParams.title!);
+    const titleDiv = container.querySelector(".title");
+    expect(titleDiv).toHaveTextContent(initParams.title!);
     const contentDiv = container.querySelector(".content");
-    expect(contentDiv).toBeNull();
+    expect(contentDiv).toHaveTextContent(initParams.content!);
     const actionsDiv = container.querySelector(".actions");
     expect(actionsDiv).toBeNull();
     expect(getByRole(container, "button")).toBeDefined();
   });
 
-  it("clicking close button call callback function", async () => {
+  it("should clicking close button call callback function", async () => {
     const { container } = render(<SnackbarItem {...initParams} duration={10000000} />);
 
     expect(initParams.onClose).not.toBeCalled();
@@ -51,7 +53,7 @@ describe("SnackbarItem", () => {
     });
   });
 
-  it("call close callback after provided duration", () => {
+  it("should call close callback after provided duration", () => {
     render(<SnackbarItem {...initParams} />);
 
     expect(initParams.onClose).not.toBeCalled();
@@ -60,4 +62,16 @@ describe("SnackbarItem", () => {
       expect(initParams.onClose).toHaveBeenCalledWith(initParams.id);
     });
   });
+
+  it("should render only content when only title is provided", () => {
+    const { container } = render(<SnackbarItem {...initParams} content={undefined} />);
+
+    const titleDiv = container.querySelector(".title");
+    expect(titleDiv).toBeNull();
+    const contentDiv = container.querySelector(".content");
+    expect(contentDiv).toHaveTextContent(initParams.title!);
+    const actionsDiv = container.querySelector(".actions");
+    expect(actionsDiv).toBeNull();
+    expect(getByRole(container, "button")).toBeDefined();
+  });
 });