forstok-ui-lib 5.2.49 → 5.2.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.2.49",
+  "version": "5.2.51",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/index.ts

@@ -22,6 +22,7 @@ export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateComponent } from './date';
 export { default as DateTimeComponent } from './datetime';
+export { default as RadioComponent } from './radio';
 
 export * from './dropdown/typed';
 export * from './message/typed';

package/src/components/radio/index.tsx

@@ -0,0 +1,30 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { RadioContainer, RadioInput, RadioSpan } from './styles';
+
+type TRadio = InputHTMLAttributes<HTMLInputElement> & {
+  children?: ReactNode
+  $mode?: string
+  evChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  'data-qa-id'?: string
+};
+
+const RadioComponent = ({ children, $mode, evChange,...props }: TRadio) => {
+  const { id } = props;
+  return (
+    <RadioContainer>
+      <label htmlFor={id}>
+        <RadioInput 
+          type='radio' 
+          id={id} 
+          $mode={$mode} 
+          onChange={(e: ChangeEvent<HTMLInputElement>) => { 
+            evChange && evChange(e)
+          }} 
+          {...props} />
+        <RadioSpan $mode={$mode} {...props['data-qa-id'] && { 'data-qa-id': props['data-qa-id'] }}>{children}</RadioSpan>
+      </label>
+    </RadioContainer>
+  );
+}
+
+export default RadioComponent

package/src/components/radio/styles.ts

@@ -0,0 +1,85 @@
+import styled, { css } from 'styled-components'
+
+import IconCheckmarkTick from '../../assets/images/icons/checkmark-tick.svg'
+
+export const RadioContainer = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  justify-self: self-start;
+`
+
+export const RadioSpan = styled.span<{ $mode?: string }>`
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  transition: .28s ease;
+  user-select: none;
+  padding-left: 22px;
+  &:before, 
+  &:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 10px;
+    height: 10px;
+    z-index: 0;
+    transition: .28s ease;
+    border: 2px solid #5a5a5a;
+    border-radius: 50%;
+  }
+  b {
+    line-height: 18px;
+    display: block;
+  }
+  .sub {
+    font-size: 90%;
+    color: #2d3c48;
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'check') {
+      return css` 
+        &:before, 
+        &:after {
+          border: none;
+        }
+      `
+    }
+  }}  
+`
+
+export const RadioInput = styled.input<{ $mode?: string }>`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: auto;
+  &:checked + ${RadioSpan} {
+    &:before {
+      border: 2px solid var(--err-clr-ln);
+    }
+    &:after {
+      transform: scale(0.6);
+      background-color: var(--err-clr-ln);
+      border: 2px solid transparent;
+    }
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'check') {
+      return css` 
+        &:checked + ${RadioSpan} {
+          &:before, 
+          &:after {
+            border: none;
+            transform: none;
+            background: none;
+          }
+          &:before {
+            content: url(${IconCheckmarkTick});
+            width: 14px;
+          }
+        }
+      `
+    }
+  }}
+`