onekijs-ui 0.19.21 → 0.19.22

package/src/components/icon/WarningIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const WarningIconComponent: FC<IconProps> = (props) => {
   return (
@@ -20,12 +21,14 @@ const WarningIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(WarningIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'warning' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'warning', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     .o-icon-warning-svg {
       display: inline-block;
       fill: currentColor;

package/src/components/icon/typings.ts

@@ -1,8 +1,10 @@
 import { Property } from 'csstype';
-import { ColorPropertyTheme } from '../../styles/typings';
+import { ColorPropertyTheme, SpacingPropertyTheme, TLength } from '../../styles/typings';
 
 export type IconProps = React.InputHTMLAttributes<HTMLDivElement> & {
   color?: ColorPropertyTheme | Property.Color;
+  marginRight?: SpacingPropertyTheme| Property.MarginRight<TLength>;
+  marginLeft?: SpacingPropertyTheme| Property.MarginLeft<TLength>;
 };
 
 export type TogglerIconProps = IconProps & {

package/src/components/wizard/components/Step.tsx

@@ -5,6 +5,7 @@ import { addClassname } from '../../../utils/style';
 import useStep from '../hooks/useStep';
 import { useWizardState } from '../hooks/useWizardState';
 import { StepProps } from '../typings';
+import Alert from '../../alert';
 
 const Step: FCC<StepProps> = ({
   title,
@@ -19,6 +20,7 @@ const Step: FCC<StepProps> = ({
   showTitle = true,
   className,
   onTouch,
+  help,
 }) => {
   const { animate, forwardOnly } = useWizardState();
 
@@ -63,6 +65,7 @@ const Step: FCC<StepProps> = ({
     <CSSTransition in={true} timeout={animate} appear={true} onEnter={onEnter} onEntering={onEntering}>
       <div className={addClassname('o-step-content', className)}>
         {showTitle && <div className="o-step-content-title">{title}</div>}
+        {help && <Alert kind="info" marginBottom='lg'>{help}</Alert>}
         {children}
       </div>
     </CSSTransition>

package/src/components/wizard/typings.ts

@@ -12,6 +12,7 @@ export type ControlledWizardProps = WizardProps & {
 export type StepProps = TabProps & {
   optional?: boolean;
   showTitle?: boolean;
+  help?: ReactNode;
   onTouch?: () => void;
 };
 

package/src/index.ts

@@ -252,6 +252,11 @@ export { default as useTableService } from './components/table/hooks/useTableSer
 export { default as useTextColumn } from './components/table/hooks/useTextColumn';
 export { default as useTextareaColumn } from './components/table/hooks/useTextareaColumn';
 
+export { default as AlertComponent } from './components/alert/components/AlertComponent';
+export { default as Alert } from './components/alert';
+export { default as alertStyle } from './components/alert/style';
+export { AlertProps } from './components/alert/typings';
+
 export { default as FormCardDisplayer } from './components/card/FormCardDisplayer';
 export { filterListStyle, tableStyle } from './components/table/style';
 export {