forstok-ui-lib 5.2.48 → 5.2.50

package/package.json

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

package/src/assets/images/icons/filter copy.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="auto" height="auto" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <title>filter-horizontal-solid</title>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="invisible_box" data-name="invisible box">
+      <rect width="48" height="48" fill="none"/>
+    </g>
+    <g id="icons_Q2" data-name="icons Q2">
+      <path d="M41.8,8H21.7A6.2,6.2,0,0,0,16,4a6,6,0,0,0-5.6,4H6.2A2.1,2.1,0,0,0,4,10a2.1,2.1,0,0,0,2.2,2h4.2A6,6,0,0,0,16,16a6.2,6.2,0,0,0,5.7-4H41.8A2.1,2.1,0,0,0,44,10,2.1,2.1,0,0,0,41.8,8Z"/>
+      <path d="M41.8,22H37.7A6.2,6.2,0,0,0,32,18a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4H26.4A6,6,0,0,0,32,30a6.2,6.2,0,0,0,5.7-4h4.1a2,2,0,1,0,0-4Z"/>
+      <path d="M41.8,36H24.7A6.2,6.2,0,0,0,19,32a6,6,0,0,0-5.6,4H6.2a2,2,0,1,0,0,4h7.2A6,6,0,0,0,19,44a6.2,6.2,0,0,0,5.7-4H41.8a2,2,0,1,0,0-4Z"/>
+    </g>
+  </g>
+</svg>

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;
+          }
+        }
+      `
+    }
+  }}
+`