@hellobetterdigitalnz/selwynui 0.0.1-68 → 0.0.1-69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellobetterdigitalnz/selwynui",
-  "version": "0.0.1-68",
+  "version": "0.0.1-69",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -30,6 +30,7 @@
     "react-dom": "^19.2.0",
     "react-icons": "^5.5.0",
     "react-loading-skeleton": "^3.5.0",
+    "react-responsive-masonry": "^2.7.1",
     "react-slick": "^0.31.0",
     "sass": "^1.94.1",
     "slick-carousel": "^1.8.1",
@@ -54,6 +55,7 @@
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
+    "@types/react-responsive-masonry": "^2.7.0",
     "@types/react-slick": "^0.23.13",
     "@vitejs/plugin-react": "^5.1.0",
     "@vitest/browser-playwright": "^4.0.8",

package/src/Components/DataDisplay/BrandBuilderTool/BrandBuilderToolUploader/BrandBuilderToolUploader.tsx

@@ -1,5 +1,6 @@
 import styles from '../brandBuilder.module.scss'
 import BrandBuilderToolUploaderProps from "./BrandBuilderToolUploaderProps.tsx";
+import Masonry from "react-responsive-masonry"
 const BrandBuilderToolUploader = (props : BrandBuilderToolUploaderProps) =>{
 
   const {action, children } = props
@@ -21,9 +22,11 @@ const BrandBuilderToolUploader = (props : BrandBuilderToolUploaderProps) =>{
         If you choose four, each image will be placed into its own segment of the selected shape, and the shape will automatically mask them.
       </p>
     </div>
-    <>
-      {children}
-    </>
+    <div className={styles.imagesUploader}>
+        <Masonry gutter={'24px'}  columnsCount={2}>
+          {children}
+        </Masonry>
+    </div>
   </div>
 }
 

package/src/Components/DataDisplay/BrandBuilderTool/brandBuilder.module.scss

@@ -129,6 +129,14 @@
 
   }
 
+  .imagesUploader{
+    position: relative;
+
+    img{
+      width: 100%;
+    }
+  }
+
   .brandBuilderToolUploader{
     border-bottom: 1px solid var(--color-block-text);
     margin-bottom: 24px;

package/src/Components/Form/RadioButtons/RadioButton.tsx

@@ -0,0 +1,83 @@
+import cx from "classnames";
+import RadioButtonProps from "./RadioButtonProps";
+import styles from "./radiobutton.module.scss";
+
+const RadioButton = (props: RadioButtonProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    displaytype,
+    onChange,
+    ...args
+  } = props;
+
+  const classes = ["radio", styles.radio];
+  const classesHolders = [
+    "radioHolder",
+    styles.radioHolder,
+    `${displaytype === "box" && styles.radioBtnBox}`,
+  ];
+  
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  if (disabled) {
+    classesHolders.push(styles.disabled);
+  }
+
+  if (error) {
+    classes.push(styles.error);
+    classesHolders.push(styles.error);
+  }
+
+  const handleChange = (e: any) => {
+    if (!readonly && !disabled) {
+      if (onChange) {
+        onChange(e, e.target.checked);
+      }
+    }
+  };
+
+  return (
+    <div className={styles.radioButtonWrap}>
+      <label className={cx(classesHolders)} onChange={handleChange}>
+        <div className={cx(classes)} >
+          <input
+            id={id}
+            name={name}
+            checked={checked} 
+            type={"radio"}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readonly}
+            required={required}
+            aria-label={ariaLabel ? ariaLabel : name}
+            aria-required={required ? "true" : "false"}
+            aria-invalid={error ? "true" : "false"}
+            aria-disabled={disabled ? "true" : "false"}
+            aria-readonly={readonly ? "true" : "false"}
+            {...args}
+          />
+          <div className={styles.circle}></div>
+        </div>
+        {!!label && <label htmlFor={id}>{label}</label>}
+      </label>
+    </div>
+  );
+};
+
+
+export default RadioButton;

package/src/Components/Form/RadioButtons/RadioButtonProps.tsx

@@ -0,0 +1,24 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface RadioButtonProps {
+  label?:string | React.ReactNode;
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  checked?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onChange?: (e: MouseEvent, checked?: boolean) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  displaytype?: 'default' | 'box'
+}
+
+export default RadioButtonProps;

package/src/Components/Form/RadioButtons/RadioButtons.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import RadioButtons from "./RadioButtons";
+import RadioButton from "./RadioButton";
+import React from 'react';
+
+import "./radioButton.stories.scss";
+
+const meta: Meta = {
+  title: "Form / Radio Button",
+  component: RadioButton,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const RadioButtoTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <div className={'visit'}>
+        <RadioButtons {...args}>
+          {items.map((item: any) => (
+            <RadioButton label={item.label} name={item.name} id={item.id}  />
+          ))}
+        </RadioButtons>
+      </div>
+    );
+  }
+};
+
+const RadioButtonBoxTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <RadioButtons {...args}>
+        {items.map((item: any) => (
+          <RadioButton label={item.label} name={item.name} id={item.id}  displaytype={item.displayType} />
+        ))}
+      </RadioButtons>
+    );
+  }
+};
+
+export const Default = {
+  ...RadioButtoTemplate,
+  args: {
+    columns: true,
+    items: [
+      {
+        id: "r-1",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-2",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-3",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-4",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-5",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      },
+      {
+        id: "r-6",
+        name: "check-one",
+        disabled: true,
+        label: "Radio"
+      }
+    ]
+  }
+};
+
+export const RadioButtonBox = {
+  ...RadioButtonBoxTemplate,
+  args: {
+    columns: false,
+    
+    items: [
+      {
+        id: "r-1",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-2",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-3",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      },
+      {
+        id: "r-4",
+        name: "check-one",
+        disabled: true,
+        label: "Radio",
+        displayType: "box"
+      }
+    ]
+  }
+};
+

package/src/Components/Form/RadioButtons/RadioButtons.tsx

@@ -0,0 +1,18 @@
+import RadioButtonsProps from "./RadioButtonsProps";
+import styles from "./radiobutton.module.scss";
+
+const RadioButtons = (props: RadioButtonsProps) => {
+  const { children, columns, extraClass } = props;
+
+  return (
+    <div
+      className={`${styles.radioSet} ${extraClass} ${
+        columns ? styles.container : ""
+      }`}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default RadioButtons;

package/src/Components/Form/RadioButtons/RadioButtonsProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface RadioButtonsProps {
+  children: ReactNode;
+  error?: boolean;
+  columns?: boolean;
+  extraClass?: string;
+}
+
+export default RadioButtonsProps;

package/src/Components/Form/RadioButtons/radioButton.stories.scss

@@ -0,0 +1,3 @@
+.spacing {
+  padding: 4px;
+}

package/src/Components/Form/RadioButtons/radiobutton.module.scss

@@ -0,0 +1,189 @@
+.radioSet {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--space-unit) * -1);
+
+  &.container {
+    flex-direction: column;
+  }
+
+  &:has(.radioBtnBox) {
+    margin:0 -8px;
+    flex-wrap:nowrap;
+  }
+
+}
+
+.radioHolder {
+  display: inline-flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1);
+
+  label {
+    cursor: pointer;
+    margin-left: calc(var(--space-unit) * 3);
+  }
+
+  &.error {
+    label {
+      color: var(--color-error);
+    }
+  }
+
+  &.disabled {
+    label {
+      cursor: not-allowed;
+      color: var(--color-text);
+    }
+  }
+
+}
+
+.radioButtonWrap {
+   display: flex;
+
+  &:has(.radioBtnBox) {
+     padding: 0 8px;
+     width: 100%;
+  }
+}
+
+.radioBtnBox {
+  border: 1px solid var(--color-text);
+  flex-direction: row-reverse;
+  padding:15px 24px;
+  justify-content: space-between;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+
+  .container & {
+    margin-bottom: 16px;
+  }
+
+  label {
+    font-family: var(--font);
+    margin-left:0;
+    margin-right: 12px;
+  }
+
+  
+}
+
+
+.radioBtnBox:has(input[type="radio"]:checked) {
+  --dropdown-border-color: var(--dropdown-selector-color);
+  
+}
+
+[dir="rtl"] {
+  .radioHolder {
+    label {
+      margin-left: 0px;
+      margin-right: calc(var(--space-unit) * 3);
+    }
+  }
+}
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  p {
+    font-size: var(--text-h-xxs);
+    line-height: var(--line-height-h-xxs);
+    font-family: var(--font);
+  }
+
+  input[type="radio"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid var(--color-text);
+    outline-offset: 2px;
+    outline: 2px solid transparent;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+
+    &:checked + .circle {
+      opacity: 1;
+    }
+
+    
+
+    &:focus {
+      outline: 2px solid var(--color-text);
+    }
+
+    &:hover {
+      border: 2px solid var(--color-text);
+    }
+
+    &:disabled {
+      //background-color: var(--color-gr);
+      cursor: not-allowed;
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  .circle {
+    content: "";
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    background-color: var(--color-text);
+    opacity: 0;
+    pointer-events: none;
+    z-index: 10;
+  }
+}
+
+
+@media screen and (max-width: 768px) {
+  .radioBtnBox {
+    .container & {
+      margin-bottom: 0px;
+    }
+  }
+
+  .radioSet {
+    &:has(.radioBtnBox) {
+      flex-direction: column;
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .radioButtonWrap {
+    &:has(.radioBtnBox) {
+      padding-left: 0;
+      padding-right: 0;
+
+      &:last-child {
+        .radioBtnBox {
+          border-bottom: 1px solid var(--color-text);
+        }
+      }
+    }
+  }
+
+  .radioBtnBox {
+    border-bottom: 1px solid transparent;
+  }
+
+  .radioBtnBox:has(input[type="radio"]:checked) {
+    border-bottom: 1px solid var(--color-text);
+  
+  }
+}