@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

package/src/Components/Form/DropdownField/DropdownFieldSelector.tsx

@@ -1,15 +1,15 @@
-import cx from 'classnames';
-import DropdownFieldSelectorProps from "./DropdownFieldSelectorProps";
-import styles from './dropdown.module.scss';
-
-const DropdownFieldSelector = (props: DropdownFieldSelectorProps) => {
-
-  const classes = [styles.dropdownSelector];
-
-  return <div className={cx(classes)}>
-    {props.children}
-  </div>
-
-}
-
-export default DropdownFieldSelector;
+import cx from 'classnames';
+import DropdownFieldSelectorProps from "./DropdownFieldSelectorProps";
+import styles from './dropdown.module.scss';
+
+const DropdownFieldSelector = (props: DropdownFieldSelectorProps) => {
+
+  const classes = [styles.dropdownSelector];
+
+  return <div className={cx(classes)}>
+    {props.children}
+  </div>
+
+}
+
+export default DropdownFieldSelector;

package/src/Components/Form/DropdownField/DropdownFieldSelectorProps.tsx

@@ -1,7 +1,7 @@
-import {ReactNode} from "react";
-
-interface DropdownFieldSelectorProps {
-  children: ReactNode
-}
-
-export default DropdownFieldSelectorProps;
+import {ReactNode} from "react";
+
+interface DropdownFieldSelectorProps {
+  children: ReactNode
+}
+
+export default DropdownFieldSelectorProps;

package/src/Components/Form/DropdownField/dropdown.module.scss

@@ -1,79 +1,79 @@
-.dropdown {
-  position: relative;
-
-  .control {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 48px;
-    padding: var(--space-unit) calc(var(--space-unit) * 3);
-    border: 1px solid var(--color-gray-300);
-    border-radius: 6px;
-    font-family: var(--font);
-    font-size: var(--font-size-input);
-    line-height: var(--line-height-input);
-    font-weight: var(--line-height-input);
-    cursor: pointer;
-  }
-
-  .disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
-  .label {
-    flex-grow: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding-right: calc(var(--space-unit) * 3);
-  }
-
-  .placeholder {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex-grow: 1;
-    color: var(--color-gray-500);
-    font-size: var(--font-size-input);
-    line-height: var(--line-height-input);
-    font-weight: var(--font-weight-input);
-    padding-right: calc(var(--space-unit) * 3);
-  }
-
-  .chevron {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-}
-
-.dropdownSelector {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  padding: calc(var(--space-unit) * 2) 0;
-  border-radius: 4px;
-  background-color: var(--color-white);
-  box-shadow: var(--drop-shadow-default);
-}
-
-.dropdownItem {
-  padding: calc(var(--space-unit) * 2);
-  cursor: pointer;
-
-  &.active,
-  &:hover {
-    background-color: var(--color-gray-50);
-  }
-}
+.dropdown {
+  position: relative;
+
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 48px;
+    padding: var(--space-unit) calc(var(--space-unit) * 3);
+    border: 1px solid var(--color-gray-300);
+    border-radius: 6px;
+    font-family: var(--font);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--line-height-input);
+    cursor: pointer;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .label {
+    flex-grow: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-right: calc(var(--space-unit) * 3);
+  }
+
+  .placeholder {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-grow: 1;
+    color: var(--color-gray-500);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--font-weight-input);
+    padding-right: calc(var(--space-unit) * 3);
+  }
+
+  .chevron {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.dropdownSelector {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  padding: calc(var(--space-unit) * 2) 0;
+  border-radius: 4px;
+  background-color: var(--color-white);
+  box-shadow: var(--drop-shadow-default);
+}
+
+.dropdownItem {
+  padding: calc(var(--space-unit) * 2);
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}

package/src/Components/Form/EmailField/EmailField.stories.ts

@@ -1,23 +1,23 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import EmailField from './EmailField.tsx';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Form / EmailField',
-  component: EmailField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof EmailField>;
-
-export default meta;
-type Story = StoryObj<typeof EmailField>;
-
-export const Example: Story = {
-  args: {
-    placeholder:"Placeholder",
-  },
-};
-
+import type { Meta, StoryObj } from '@storybook/react';
+
+import EmailField from './EmailField.tsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / EmailField',
+  component: EmailField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmailField>;
+
+export default meta;
+type Story = StoryObj<typeof EmailField>;
+
+export const Example: Story = {
+  args: {
+    placeholder:"Placeholder",
+  },
+};
+

package/src/Components/Form/EmailField/EmailField.tsx

@@ -1,51 +1,51 @@
-import cx from 'classnames';
-import styles from '../inputs.module.scss' ;
-import InputProps from "../InputProps";
-
-const EmailField = (props: InputProps) => {
-  const {
-    name,
-    id,
-    value,
-    placeholder,
-    extraClass,
-    disabled,
-    error,
-    ariaLabel,
-    required,
-    readonly,
-    autoComplete,
-    ...args
-  } = props;
-
-  const classes = [styles.input];
-  if (error) {
-    classes.push(styles.error);
-  }
-  if (extraClass) {
-    classes.push(extraClass);
-  }
-
-  return <input
-    className={cx(classes)}
-    id={id}
-    name={name}
-    type='email'
-    value={value}
-    placeholder={placeholder}
-    disabled={disabled}
-    readOnly={readonly}
-    required={required}
-    autoComplete={autoComplete ? "on" : "off"}
-    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"}
-    aria-autocomplete={autoComplete ? "list" : "none"}
-    {...args}
-  />
-};
-
-
-export default EmailField;
+import cx from 'classnames';
+import styles from '../inputs.module.scss' ;
+import InputProps from "../InputProps";
+
+const EmailField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <input
+    className={cx(classes)}
+    id={id}
+    name={name}
+    type='email'
+    value={value}
+    placeholder={placeholder}
+    disabled={disabled}
+    readOnly={readonly}
+    required={required}
+    autoComplete={autoComplete ? "on" : "off"}
+    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"}
+    aria-autocomplete={autoComplete ? "list" : "none"}
+    {...args}
+  />
+};
+
+
+export default EmailField;

package/src/Components/Form/ErrorMessage/ErrorMessage.tsx

@@ -1,5 +1,5 @@
-const ErrorMessage = () =>{
-
-}
-
-export default ErrorMessage;
+const ErrorMessage = () =>{
+
+}
+
+export default ErrorMessage;

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

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react";
+import FormFieldHolder from "./FormFieldHolder";
+import TextField from "../TextField/TextField";
+
+const meta: Meta = {
+  title: "Form / FormFieldHolder",
+  component: FormFieldHolder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FormFieldHolderTemplate: Story = {
+  render: () => {
+    return (
+      <FormFieldHolder label="Name" description={"helper text"}>
+        <TextField placeholder="Placeholder" />
+      </FormFieldHolder>
+    );
+  },
+};
+
+export const FormFieldHolderComponent = {
+  ...FormFieldHolderTemplate,
+};

package/src/Components/Form/FormFieldHolder/FormFieldHolder.tsx

@@ -1,5 +1,40 @@
-const FormFieldHolder = () => {
-
-}
-
-export default FormFieldHolder;
+import WarningCircle from "../../Icons/SecurityAndWarnings/WarningCircle/WarningCircle";
+import FormFieldHolderProps from "./FormFieldHolderProps";
+import styles from "./formHolder.module.scss";
+
+const FormFieldHolder = (props: FormFieldHolderProps) => {
+  const { label, description, extraClass = "", children, error } = props;
+
+  return (
+    <div
+      className={`field-holder ${extraClass} ${styles.holder} ${
+        error ? styles.holderError : ""
+      }`}
+    >
+      {!!label && (
+        <div className={styles.label}>
+          <label>{label}</label>
+        </div>
+      )}
+      <div className={styles.field}>{children}</div>
+
+      {!!description && (
+        <div className={styles.description}>
+          <>
+            {error && (
+              <div className={styles.helperIcon}>
+                <WarningCircle />
+              </div>
+            )}
+          </>
+          <>
+            {typeof description === "string" && <p>{description}</p>}
+            {typeof description !== "string" && { description }}
+          </>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FormFieldHolder;

package/src/Components/Form/FormFieldHolder/FormFieldHolderProps.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+interface FormFieldHolderProps {
+  label?: string;
+  description?: string | ReactNode;
+  extraClass?: string;
+  error?: boolean;
+  children: ReactNode;
+  icon?: ReactNode;
+}
+
+export default FormFieldHolderProps;

package/src/Components/Form/FormFieldHolder/formHolder.module.scss

@@ -0,0 +1,56 @@
+.holder {
+  margin-bottom: calc(var(--space-unit) * 5);
+  width: 100%;
+}
+
+.label {
+  display: block;
+  margin-bottom: calc(var(--space-unit) * 3);
+
+  label {
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-label);
+    font-weight: var(--font-weight-label);
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}
+
+.field {
+  .holderError & {
+    color: var(--color-error);
+  }
+}
+
+.description {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body-sm);
+  font-weight: var(--font-weight-body-sm);
+  padding-top: calc(var(--space-unit) * 2);
+  color: var(--color-description);
+
+  p {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-weight-body-sm);
+  }
+
+  .helperIcon {
+    margin-right: var(--space-unit);
+    display: flex;
+    align-items: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .holderError & {
+    color: var(--color-error);
+  }
+}

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

@@ -1,45 +1,45 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import IconButton from "./IconButton";
-import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: "Form / IconButton",
-  component: IconButton,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    icon: <CalendarBank />,
-    style: "solid",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    icon: <CalendarBank />,
-    style: "hollow",
-    size: "default",
-    scheme: "primary",
-  },
-};
-
-export const Borderless: Story = {
-  args: {
-    icon: <CalendarBank type="bold" />,
-    style: "no-border",
-    size: "default",
-    scheme: "primary",
-  },
-};
+import type { Meta, StoryObj } from "@storybook/react";
+
+import IconButton from "./IconButton";
+import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "hollow",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    icon: <CalendarBank type="bold" />,
+    style: "no-border",
+    size: "default",
+    scheme: "primary",
+  },
+};