@hellobetterdigitalnz/betterui 0.0.0 → 0.0.1

package/src/Components/DataDisplay/Accordion/AccordionProvider.tsx

@@ -1,65 +1,65 @@
-import {useState} from "react";
-import AccordionContext from "./AccordionContext";
-import AccordionProviderInterface from "./AccordionProviderInterface.tsx";
-
-const AccordionProvider = (props: AccordionProviderInterface) => {
-
-  const {
-    children,
-    allowMultiple
-  } = props;
-
-  const [openedList, setOpenedList] = useState<any[]>([]);
-
-  const isOpened = (key: number|string) => {
-    return openedList.indexOf(key) >= 0;
-  }
-
-  const openItem = (key: number|string) => {
-    if (allowMultiple) {
-      const list = [...openedList];
-      list.push(key);
-      setOpenedList(list);
-    } else {
-      setOpenedList([key])
-    }
-  }
-
-  const closeItem = (key: number|string) => {
-    if (allowMultiple) {
-      const list = [...openedList];
-      list.splice(list.indexOf(key), 1)
-      setOpenedList(list);
-    } else {
-      setOpenedList([]);
-    }
-  }
-
-  const openCloseItem = (key: number|string) => {
-    if (allowMultiple) {
-      if (isOpened(key)) {
-        closeItem(key);
-      } else {
-        openItem(key)
-      }
-    } else {
-      if (!isOpened(key)) {
-        openItem(key);
-      } else {
-        closeItem(key);
-      }
-    }
-  }
-
-  return <AccordionContext.Provider value={{
-    handleClick: openCloseItem,
-    isOpened: isOpened,
-    allowMultiple: allowMultiple ? allowMultiple : false,
-    openedList: openedList
-  }}>
-    {children}
-  </AccordionContext.Provider>
-
-}
-
-export default AccordionProvider;
+import {useState} from "react";
+import AccordionContext from "./AccordionContext";
+import AccordionProviderInterface from "./AccordionProviderInterface.tsx";
+
+const AccordionProvider = (props: AccordionProviderInterface) => {
+
+  const {
+    children,
+    allowMultiple
+  } = props;
+
+  const [openedList, setOpenedList] = useState<any[]>([]);
+
+  const isOpened = (key: number|string) => {
+    return openedList.indexOf(key) >= 0;
+  }
+
+  const openItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.push(key);
+      setOpenedList(list);
+    } else {
+      setOpenedList([key])
+    }
+  }
+
+  const closeItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.splice(list.indexOf(key), 1)
+      setOpenedList(list);
+    } else {
+      setOpenedList([]);
+    }
+  }
+
+  const openCloseItem = (key: number|string) => {
+    if (allowMultiple) {
+      if (isOpened(key)) {
+        closeItem(key);
+      } else {
+        openItem(key)
+      }
+    } else {
+      if (!isOpened(key)) {
+        openItem(key);
+      } else {
+        closeItem(key);
+      }
+    }
+  }
+
+  return <AccordionContext.Provider value={{
+    handleClick: openCloseItem,
+    isOpened: isOpened,
+    allowMultiple: allowMultiple ? allowMultiple : false,
+    openedList: openedList
+  }}>
+    {children}
+  </AccordionContext.Provider>
+
+}
+
+export default AccordionProvider;

package/src/Components/DataDisplay/Accordion/AccordionProviderInterface.tsx

@@ -1,8 +1,8 @@
-import {ReactNode} from "react";
-
-interface AccordionProviderInterface {
-  children: ReactNode,
-  allowMultiple?: boolean
-}
-
-export default AccordionProviderInterface
+import {ReactNode} from "react";
+
+interface AccordionProviderInterface {
+  children: ReactNode,
+  allowMultiple?: boolean
+}
+
+export default AccordionProviderInterface

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -1,56 +1,56 @@
-.accordion {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-bottom: 1px solid var(--color-gray-300);
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 58px;
-    background-color: var(--color-white);
-    cursor: pointer;
-    border-bottom: 1px solid var(--border);
-    padding: var(--spacing-1) var(--spacing-2);
-  }
-
-  .title {
-    h4 {
-      font-size: var(--font-size-h4);
-      line-height: var(--line-height-h4);
-      font-weight: var(--font-weight-h4);
-    }
-  }
-
-
-  .icon {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding-left: var(--spacing-1);
-
-    svg{
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  .body {
-    height: 0;
-    overflow: hidden;
-  }
-
-  .bodyOpened {
-    height: auto;
-  }
-
-  .bodyInner {
-    background: var(--color-white);
-    padding: var(--spacing-1\/2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
-  }
-
-}
-
-
-
+.accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-bottom: 1px solid var(--color-gray-300);
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 58px;
+    background-color: var(--color-white);
+    cursor: pointer;
+    border-bottom: 1px solid var(--border);
+    padding: var(--spacing-1) var(--spacing-2);
+  }
+
+  .title {
+    h4 {
+      font-size: var(--font-size-h4);
+      line-height: var(--line-height-h4);
+      font-weight: var(--font-weight-h4);
+    }
+  }
+
+
+  .icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: var(--spacing-1);
+
+    svg{
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .body {
+    height: 0;
+    overflow: hidden;
+  }
+
+  .bodyOpened {
+    height: auto;
+  }
+
+  .bodyInner {
+    background: var(--color-white);
+    padding: var(--spacing-1\/2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  }
+
+}
+
+
+

package/src/Components/DataDisplay/Badge/Badge.stories.tsx

@@ -1,44 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Badge from './Badge';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Data Display / Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    status: {
-      options: ["pending" , "inProgress" , "complete"],
-      control: { type: 'select' },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof Badge>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Pending: Story = {
-  args: {
-    label: 'Pending',
-    status:'pending',
-  },
-};
-
-export const InProgress: Story = {
-  args: {
-    label: 'In Progress',
-    status:'inProgress',
-  },
-};
-
-export const Complete: Story = {
-  args: {
-    label: 'Complete',
-    status:'complete',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Data Display / Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    status: {
+      options: ["pending" , "inProgress" , "complete"],
+      control: { type: 'select' },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Pending: Story = {
+  args: {
+    label: 'Pending',
+    status:'pending',
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    label: 'In Progress',
+    status:'inProgress',
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    label: 'Complete',
+    status:'complete',
+  },
+};

package/src/Components/DataDisplay/Badge/Badge.tsx

@@ -1,32 +1,32 @@
-import BadgeProps from "./BadgeProps.tsx";
-import cx from 'classnames';
-import styles from './badge.module.scss';
-
-const Badge = (props : BadgeProps) => {
-
-  const {
-    status,
-    label
-  } = props;
-
-  let statusClass = styles.circlePending;
-  if (status === 'inProgress') {
-    statusClass = styles.circleInProgress;
-  } if (status === 'complete') {
-    statusClass = styles.circleComplete;
-  }
-
-  return <div className={styles.badge}>
-    <div className={styles.wrapper}>
-      {!!label && <div className={cx(
-        styles.circle,
-        statusClass
-      )}></div>}
-      <div className={styles.title}>
-        <span>{label}</span>
-      </div>
-    </div>
-  </div>
-}
-
-export default Badge;
+import BadgeProps from "./BadgeProps.tsx";
+import cx from 'classnames';
+import styles from './badge.module.scss';
+
+const Badge = (props : BadgeProps) => {
+
+  const {
+    status,
+    label
+  } = props;
+
+  let statusClass = styles.circlePending;
+  if (status === 'inProgress') {
+    statusClass = styles.circleInProgress;
+  } if (status === 'complete') {
+    statusClass = styles.circleComplete;
+  }
+
+  return <div className={styles.badge}>
+    <div className={styles.wrapper}>
+      {!!label && <div className={cx(
+        styles.circle,
+        statusClass
+      )}></div>}
+      <div className={styles.title}>
+        <span>{label}</span>
+      </div>
+    </div>
+  </div>
+}
+
+export default Badge;

package/src/Components/DataDisplay/Badge/BadgeProps.tsx

@@ -1,6 +1,6 @@
-interface BadgeProps {
-  status?: "pending" | "inProgress" | "complete";
-  label: string;
-}
-
-export default BadgeProps
+interface BadgeProps {
+  status?: "pending" | "inProgress" | "complete";
+  label: string;
+}
+
+export default BadgeProps

package/src/Components/DataDisplay/Badge/badge.module.scss

@@ -1,42 +1,42 @@
-.badge {
-  min-height: 24px;
-  border-radius: 4px;
-  border: 1px solid var(--color-gray-200);
-  background: var(--color-lite);
-
-  .wrapper {
-    display: flex;
-    align-items: center;
-    padding:0 var(--spacing-1\/2) ;
-  }
-
-  .circle{
-    width: 12px;
-    height: 12px;
-    border-radius: 100%;
-    flex-shrink: 1;
-    margin-right: 6px;
-
-    &Pending{
-      background: var(--color-gray-300);
-    }
-
-    &InProgress{
-      background: var(--color-inprogress);
-    }
-
-    &Complete{
-      background: var(--color-success);
-    }
-
-  }
-
-  .title{
-    span{
-      color: var(--color-gray-900);
-      font-size: var(--font-size-body-sm);
-      font-weight:var(--font-weight-body-sm) ;
-    }
-  }
-
-}
+.badge {
+  min-height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-200);
+  background: var(--color-lite);
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    padding:0 var(--spacing-1\/2) ;
+  }
+
+  .circle{
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    flex-shrink: 1;
+    margin-right: 6px;
+
+    &Pending{
+      background: var(--color-gray-300);
+    }
+
+    &InProgress{
+      background: var(--color-inprogress);
+    }
+
+    &Complete{
+      background: var(--color-success);
+    }
+
+  }
+
+  .title{
+    span{
+      color: var(--color-gray-900);
+      font-size: var(--font-size-body-sm);
+      font-weight:var(--font-weight-body-sm) ;
+    }
+  }
+
+}

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.stories.tsx

@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { BannerCard } from './BannerCard.tsx';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Data Display / Card',
-  component: BannerCard,
-  tags: ['autodocs'],
-} satisfies Meta<typeof BannerCard>;
-
-export default meta;
-type Story = StoryObj<typeof BannerCard>;
-
-export const Example: Story = {
-  args: {
-    title:'Lorem ipsum',
-    description:'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. ',
-    image:'',
-    btnTitle:'Button text',
-    btnScheme:'primary',
-    btnSize:'default',
-    btnStyle:'solid',
-  },
-};
-
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BannerCard } from './BannerCard.tsx';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Data Display / Card',
+  component: BannerCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof BannerCard>;
+
+export default meta;
+type Story = StoryObj<typeof BannerCard>;
+
+export const Example: Story = {
+  args: {
+    title:'Lorem ipsum',
+    description:'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. ',
+    image:'',
+    btnTitle:'Button text',
+    btnScheme:'primary',
+    btnSize:'default',
+    btnStyle:'solid',
+  },
+};
+

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.tsx

@@ -1,47 +1,47 @@
-import BannerCardInterface from "./BannerCardInterface.tsx";
-import './banner-card.scss'
-import Button from "../../../Form/Button/Button";
-
-export const BannerCard = (props: BannerCardInterface) => {
-  const {
-    title,
-    btnTitle,
-    description,
-    image,
-    btnType,
-    btnScheme,
-    btnSize,
-    btnStyle,
-    extraClass='',
-    btnOnClick
-  } = props;
-
-  const imageType = typeof image;
-
-  return (
-    <div
-      className={`banner-card ${extraClass}`}>
-      <div className={'banner-card__wrapper'}>
-        {imageType === "string" && (
-          <div
-            className={'banner-card__picture'}
-            style={{backgroundImage: image ? `url(${image})` : ""}}></div>
-        )}
-        {imageType !== "string" && <div className={'banner-card__picture'}>{image}</div>}
-        <div className={'banner-card__inner'}>
-          <div className={'banner-card__content'}>
-            {!!title && <h2 className={'banner-card__title'}>{title}</h2>}
-            {!!description && <p className={'banner-card__desc'}>{description}</p>}
-          </div>
-          <Button
-            label={btnTitle}
-            type={btnType}
-            style={btnStyle}
-            size={btnSize}
-            scheme={btnScheme}
-            onClick={btnOnClick}/>
-        </div>
-      </div>
-    </div>
-  );
-};
+import BannerCardInterface from "./BannerCardInterface.tsx";
+import './banner-card.scss'
+import Button from "../../../Form/Button/Button";
+
+export const BannerCard = (props: BannerCardInterface) => {
+  const {
+    title,
+    btnTitle,
+    description,
+    image,
+    btnType,
+    btnScheme,
+    btnSize,
+    btnStyle,
+    extraClass='',
+    btnOnClick
+  } = props;
+
+  const imageType = typeof image;
+
+  return (
+    <div
+      className={`banner-card ${extraClass}`}>
+      <div className={'banner-card__wrapper'}>
+        {imageType === "string" && (
+          <div
+            className={'banner-card__picture'}
+            style={{backgroundImage: image ? `url(${image})` : ""}}></div>
+        )}
+        {imageType !== "string" && <div className={'banner-card__picture'}>{image}</div>}
+        <div className={'banner-card__inner'}>
+          <div className={'banner-card__content'}>
+            {!!title && <h2 className={'banner-card__title'}>{title}</h2>}
+            {!!description && <p className={'banner-card__desc'}>{description}</p>}
+          </div>
+          <Button
+            label={btnTitle}
+            type={btnType}
+            style={btnStyle}
+            size={btnSize}
+            scheme={btnScheme}
+            onClick={btnOnClick}/>
+        </div>
+      </div>
+    </div>
+  );
+};