@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

package/src/Components/Layout/Pagination/PaginationFirst.tsx

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

package/src/Components/Layout/Pagination/PaginationLast.tsx

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

package/src/Components/Layout/Pagination/PaginationNext.tsx

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

package/src/Components/Layout/Pagination/PaginationNumber.tsx

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

package/src/Components/Layout/Pagination/PaginationPrevious.tsx

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

package/src/Components/Layout/ProfileAvatar/ProfileAvatar.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ProfileAvatar from "./ProfileAvatar";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Layout / Profile / ProfileAvatar",
+  component: ProfileAvatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProfileAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof ProfileAvatar>;
+
+export const Example: Story = {
+  args: {
+    initials: "AB",
+  },
+};

package/src/Components/Layout/ProfileAvatar/ProfileAvatar.tsx

@@ -1,5 +1,31 @@
-const ProfileAvatar = () => {
-
-}
-
-export default ProfileAvatar;
+import ProfileAvatarProps from "./ProfileAvatarProps";
+import styles from "./profileAvatar.module.scss";
+
+const ProfileAvatar = (props: ProfileAvatarProps) => {
+  const { initials, children, extraClass, onClick } = props;
+
+  return (
+    <div
+      className={`${styles.profile} ${extraClass}`}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+        }
+      }}
+    >
+      <div className={`${styles.profileInner}`}>
+        {!!initials && (
+          <span className={`${styles.avatar}`}>
+            <h3>{initials}</h3>
+          </span>
+        )}
+      </div>
+
+      {children && onClick && (
+        <div className={`${styles.dropdown}`}>{children}</div>
+      )}
+    </div>
+  );
+};
+
+export default ProfileAvatar;

package/src/Components/Layout/ProfileAvatar/ProfileAvatarProps.tsx

@@ -1,4 +1,10 @@
-interface ProfileAvatarProps {
-  initial?: string;
-  children?: ReactNode;
-}
+import { ReactNode } from "react";
+
+interface ProfileAvatarProps {
+  initials?: string;
+  children?: ReactNode;
+  extraClass?: string;
+  onClick?: (e: any) => void;
+}
+
+export default ProfileAvatarProps;

package/src/Components/Layout/ProfileAvatar/profileAvatar.module.scss

@@ -0,0 +1,35 @@
+.profile {
+  position: relative;
+  cursor: pointer;
+}
+
+.profileInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  min-width: 48px;
+  border-radius: 100%;
+  background: var(--color-primary-500);
+  color: var(--color-white);
+}
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  h5 {
+    font-size: var(--font-size-body-xsm);
+    font-weight: 700;
+    line-height: 2.33;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 100%;
+  padding-top: 12px;
+}

package/src/Components/Layout/ProfileDropdown/ProfileDropdown.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ProfileDropdown from "./ProfileDropdown";
+import ProfileHeader from "./ProfileHeader";
+import ProfileNavigationItem from "./ProfileNavigationItem";
+import ProfileLinks from "./ProfileLinks";
+import ProfileLink from "./ProfileLink";
+import AddressBook from "../../Icons/Communication/AddressBook/AddressBook";
+import ProfileSwitchPanel from "./ProfileSwitchPanel";
+import ProfileSwitchUser from "./ProfileSwitchUser";
+
+const meta: Meta = {
+  title: "Layout / Profile / ProfileDropdown",
+  component: ProfileDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const ProfileDropdownTemplate: Story = {
+  render: () => {
+    return (
+      <ProfileDropdown>
+        <ProfileHeader initials="AB" username="Lorem Ipsum" role="Position" />
+        <ProfileNavigationItem title={"Hello"} icon={<AddressBook />} />
+        <ProfileNavigationItem
+          title={"Hello"}
+          icon={<AddressBook />}
+          openSubDropdown={true}
+        />
+        <ProfileNavigationItem title={"Hello"} icon={<AddressBook />} />
+        <ProfileLinks>
+          <ProfileLink>
+            <h5>hey</h5>
+          </ProfileLink>
+          <ProfileLink>hey</ProfileLink>
+        </ProfileLinks>
+      </ProfileDropdown>
+    );
+  },
+};
+
+const ProfileSwitchUsersTemplate: Story = {
+  render: () => {
+    return (
+      <ProfileSwitchPanel>
+        <ProfileSwitchUser initials="AB" userName="Username" role="Role" />
+        <ProfileSwitchUser initials="AB" userName="Username" role="Role" />
+        <ProfileSwitchUser initials="AB" userName="Username" role="Role" />
+        <ProfileSwitchUser initials="AB" userName="Username" role="Role" />
+        <ProfileSwitchUser initials="AB" userName="Username" role="Role" />
+      </ProfileSwitchPanel>
+    );
+  },
+};
+
+export const ProfileDropdownComponent = {
+  ...ProfileDropdownTemplate,
+};
+
+export const ProfileSwitchUserPanelComponent = {
+  ...ProfileSwitchUsersTemplate,
+};

package/src/Components/Layout/ProfileDropdown/ProfileDropdown.tsx

@@ -1,5 +1,12 @@
-const ProfileDropdown = () => {
-
-}
-
-export default ProfileDropdown;
+import ProfileDropdownProps from "./ProfileDropdownProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileDropdown = (props: ProfileDropdownProps) => {
+  const { children, extraClass } = props;
+
+  return (
+    <div className={`${styles.profileDropdown} ${extraClass}`}>{children}</div>
+  );
+};
+
+export default ProfileDropdown;

package/src/Components/Layout/ProfileDropdown/ProfileDropdownProps.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface ProfileDropdownProps {
+  children?: ReactNode;
+  extraClass?: string;
+}
+
+export default ProfileDropdownProps;

package/src/Components/Layout/ProfileDropdown/ProfileHeader.tsx

@@ -1,5 +1,24 @@
-const ProfileHeader = () => {
-
-}
-
-export default ProfileHeader;
+import ProfileHeaderProps from "./ProfileHeaderProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileHeader = (props: ProfileHeaderProps) => {
+  const { initials, username, role, extraClass } = props;
+
+  return (
+    <div className={`${styles.profileHeader} ${extraClass}`}>
+      <div className={`${styles.profileHeaderWrapper}`}>
+        {!!initials && (
+          <span className={`${styles.avatar}`}>
+            <h3>{initials}</h3>
+          </span>
+        )}
+        <div className={`${styles.content}`}>
+          <h5 className={`${styles.name}`}>{username}</h5>
+          {!!role && <p className={`${styles.role}`}>{role}</p>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileHeader;

package/src/Components/Layout/ProfileDropdown/ProfileHeaderProps.tsx

@@ -0,0 +1,8 @@
+interface ProfileHeaderProps {
+  initials?: string;
+  username: string;
+  role?: string;
+  extraClass?: string;
+}
+
+export default ProfileHeaderProps;

package/src/Components/Layout/ProfileDropdown/ProfileLink.tsx

@@ -1,5 +1,10 @@
-const ProfileLink = () => {
-
-}
-
-export default ProfileLink;
+import ProfileLinkProps from "./ProfileLinkProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileLink = (props: ProfileLinkProps) => {
+  const { children } = props;
+
+  return <li className={styles.profileLink}>{children}</li>;
+};
+
+export default ProfileLink;

package/src/Components/Layout/ProfileDropdown/ProfileLinkProps.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileLinks.tsx

@@ -1,5 +1,14 @@
-const ProfileLinks = () => {
-
-}
-
-export default ProfileLinks;
+import ProfileLinksProps from "./ProfileLinksProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileLinks = (props: ProfileLinksProps) => {
+  const { children } = props;
+
+  return (
+    <div className={`${styles.profileLinks}`}>
+      <ul>{children}</ul>
+    </div>
+  );
+};
+
+export default ProfileLinks;

package/src/Components/Layout/ProfileDropdown/ProfileLinksProps.tsx

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

package/src/Components/Layout/ProfileDropdown/ProfileNavigationItem.tsx

@@ -1,5 +1,29 @@
-const ProfileNavigationItem = () => {
-
-}
-
-export default ProfileNavigationItem;
+import CaretRight from "../../Icons/Arrows/CaretRight/CaretRight";
+import ProfileNavigationItemProps from "./ProfileNavigationItemProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileNavigationItem = (props: ProfileNavigationItemProps) => {
+  const { icon, openSubDropdown, title } = props;
+
+  return (
+    <div className={`${styles.profileNavigationItem}`}>
+      <div className={`${styles.profileNavigationItemWrapper}`}>
+        <div className={`${styles.profileNavigationItemLeft}`}>
+          {!!icon && (
+            <div className={`${styles.profileNavigationItemIcon}`}>{icon}</div>
+          )}
+          <div className={styles.profileNavigationItemContent}>
+            <h5>{title}</h5>
+          </div>
+        </div>
+        {!!openSubDropdown && (
+          <div className={`${styles.profileNavigationItemRight}`}>
+            <CaretRight />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProfileNavigationItem;

package/src/Components/Layout/ProfileDropdown/ProfileNavigationItemProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface ProfileNavigationItemProps {
+  icon?: ReactNode;
+  title?: string;
+  onClick?: (e: MouseEvent) => void;
+  openSubDropdown?: boolean;
+}
+
+export default ProfileNavigationItemProps;

package/src/Components/Layout/ProfileDropdown/ProfileSwitchPanel.tsx

@@ -1,5 +1,79 @@
-const ProfileSwitchPanel = () => {
-
-}
-
-export default ProfileSwitchPanel;
+import cx from "classnames";
+import ProfileSwitchPanelProps from "./ProfileSwitchPanelProps";
+import style from "./profileDropdown.module.scss";
+import styles from "../../Form/inputs.module.scss";
+import CaretLeft from "../../Icons/Arrows/CaretLeft/CaretLeft";
+import XIcon from "../../Icons/MathAndFinance/XIcon/XIcon";
+import MagnifyingGlass from "../../Icons/SystemAndDevice/MagnifyingGlass/MagnifyingGlass";
+
+const ProfileSwitchPanel = (props: ProfileSwitchPanelProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    children,
+    goBackOnClick,
+    closeOnClick,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={style.profileSwitchPanel}>
+      <div className={style.profileSwitchPanelHeader}>
+        <div onClick={goBackOnClick} className={style.caretLeft}>
+          <CaretLeft type="bold" />
+        </div>
+        <div>
+          <h5 className={style.headerTitle}>Switch user</h5>
+        </div>
+        <div className={style.closeIcon}>
+          <XIcon type="bold" />
+        </div>
+      </div>
+      <div className={style.fieldWrapper}>
+        <div className={styles.textField}>
+          <input
+            className={cx(classes)}
+            id={id}
+            name={name}
+            type="text"
+            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"}
+            {...args}
+          />
+          <div className={styles.textFieldIcon}>
+            <MagnifyingGlass />
+          </div>
+        </div>
+      </div>
+      <div className={style.usersHolder}>{children}</div>
+    </div>
+  );
+};
+
+export default ProfileSwitchPanel;

package/src/Components/Layout/ProfileDropdown/ProfileSwitchPanelProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import InputProps from "../../Form/InputProps";
+
+interface ProfileSwitchPanelProps extends InputProps {
+  goBackOnClick?: (e: any) => void;
+  closeOnClick?: (e: any) => void;
+  children?: ReactNode;
+}
+
+export default ProfileSwitchPanelProps;

package/src/Components/Layout/ProfileDropdown/ProfileSwitchUser.tsx

@@ -1,5 +1,22 @@
-const ProfileSwitchUser = () => {
-
-}
-
-export default ProfileSwitchUser;
+import ProfileSwitchUserProps from "./ProfileSwitchUserProps";
+import styles from "./profileDropdown.module.scss";
+
+const ProfileSwitchUser = (props: ProfileSwitchUserProps) => {
+  const { initials, userName, role } = props;
+
+  return (
+    <div className={styles.profileSwitchUser}>
+      <div className={styles.profileSwitchUserWrapper}>
+        <div className={`${styles.profileSwitchUserAvatar} ${styles.avatar}`}>
+          <h5 className={styles.initialsTile}>{initials}</h5>
+        </div>
+        <div className={styles.profileSwitchUserContent}>
+          <h5 className={styles.name}>{userName}</h5>
+          <p className={styles.role}>{role}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSwitchUser;

package/src/Components/Layout/ProfileDropdown/ProfileSwitchUserProps.tsx

@@ -0,0 +1,7 @@
+interface ProfileSwitchUserProps {
+  initials?: string;
+  userName?: string;
+  role?: string;
+}
+
+export default ProfileSwitchUserProps;