@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/src/components/Appbar/AppbarUser.tsx

@@ -1,179 +0,0 @@
-import React, { ReactElement, ReactNode } from "react";
-import classNames from "classnames";
-import { THEME } from "../../types";
-import { Avatar, AvatarProps, AvatarSize, AVATAR_TYPE } from "../Avatar";
-import { Box } from "../Box";
-import { Flex } from "../Flex";
-import { Link } from "../Link";
-import { MenuRenderer, useMenuContext } from "../MenuRenderer";
-import { PopoverMenu } from "../PopoverMenu";
-import { Text } from "../Text";
-import { AppbarDropdownIcon } from "./AppbarDropdownIcon";
-import { cn, popperModifiers } from "./config";
-
-type AppbarUserNameProps = {
-  avatar: ReactElement<AvatarProps>;
-  name?: string;
-};
-
-type AppbarUserDropdownProps = {
-  avatar: ReactElement<AvatarProps>;
-  children: ReactNode;
-  name?: string;
-  onClose?: () => void;
-};
-
-type AppbarUserDropdownMenuProps = {
-  children: ReactNode;
-};
-
-type AppbarUserProps = {
-  avatar: ReactElement<AvatarProps>;
-  name?: string;
-};
-
-type AppbarUserDropdownMenuItemProps = {
-  as?: any;
-  onClick?: () => void;
-  selected?: boolean;
-  [key: string]: any;
-};
-
-const AppbarUserName = ({ name, avatar }: AppbarUserNameProps) => (
-  <Flex className={cn({ e: "userName" })}>
-    {avatar}
-    {name && <Text as="div">{name}</Text>}
-  </Flex>
-);
-
-// Deprecated: Remove this component in v2
-export const AppbarUserAvatar = (props: AvatarProps) => {
-  const sharedClassNames = "mr-2";
-  const sharedProps = {
-    size: "medium" as AvatarSize,
-    square: true,
-  };
-
-  if (props.type === AVATAR_TYPE.SYSTEM) {
-    return (
-      <Avatar
-        className={sharedClassNames}
-        type={AVATAR_TYPE.SYSTEM}
-        {...sharedProps}
-      />
-    );
-  }
-
-  if (props.type === AVATAR_TYPE.USER && props.email) {
-    return (
-      <Avatar
-        className={sharedClassNames}
-        type={AVATAR_TYPE.USER}
-        email={props.email}
-        {...sharedProps}
-      />
-    );
-  }
-
-  return (
-    <Avatar
-      className={classNames(sharedClassNames, "bg-gray-400")}
-      type={AVATAR_TYPE.ANONYMOUS}
-      {...sharedProps}
-    />
-  );
-};
-
-export const AppbarUserDropdown = ({
-  name,
-  avatar,
-  children,
-  onClose,
-}: AppbarUserDropdownProps) => {
-  return (
-    <Box className="h-full -mr-3">
-      <MenuRenderer
-        className={classNames([cn({ e: "menu" }), cn({ e: "userMenu" })])}
-        popperModifiers={popperModifiers}
-        onClose={onClose}
-        trigger={({ onClick, ...triggerProps }, { isOpen }) => (
-          <button
-            type="button"
-            className={classNames([
-              cn({ e: "menuButton" }),
-              cn({ e: "userMenuButton" }),
-              isOpen && "isOpen",
-            ])}
-            {...triggerProps}
-            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-              onClick(event);
-              if (onClose && isOpen) {
-                onClose();
-              }
-            }}
-          >
-            <Flex className="items-center">
-              <AppbarUserName name={name} avatar={avatar} />
-              <AppbarDropdownIcon />
-            </Flex>
-          </button>
-        )}
-      >
-        {({ listProps }) => (
-          <PopoverMenu
-            className={cn({ e: "menuList" })}
-            theme={THEME.BRAND}
-            {...listProps}
-          >
-            {children}
-          </PopoverMenu>
-        )}
-      </MenuRenderer>
-    </Box>
-  );
-};
-
-export const AppbarUserDropdownMenu = ({
-  children,
-}: AppbarUserDropdownMenuProps) => <>{children}</>;
-
-export const AppbarUserDropdownMenuItem = ({
-  children,
-  onClick,
-  as,
-  className,
-  ...rest
-}: AppbarUserDropdownMenuItemProps) => {
-  const { itemProps, onClose } = useMenuContext();
-  return (
-    <Link
-      as={as}
-      noStyles
-      className={classNames([
-        cn({ e: "menuItem" }),
-        cn({ e: "userMenuItem" }),
-        className,
-      ])}
-      onClick={() => {
-        if (typeof onClick === "function") {
-          onClick();
-        }
-        if (typeof onClose === "function") {
-          onClose();
-        }
-      }}
-      {...rest}
-      {...itemProps}
-    >
-      {children}
-    </Link>
-  );
-};
-
-export const AppbarUser = ({ name, avatar }: AppbarUserProps) => {
-  return (
-    <Box className={cn({ e: "user" })}>
-      <AppbarUserName name={name} avatar={avatar} />
-    </Box>
-  );
-};

package/src/components/Appbar/config.ts

@@ -1,12 +0,0 @@
-import { bemHOF } from "../../utilities/bem";
-
-export const cn = bemHOF("Appbar");
-
-export const popperModifiers = [
-  {
-    name: "offset",
-    options: {
-      offset: [0, 4],
-    },
-  },
-];

package/src/components/Appbar/context.ts

@@ -1,20 +0,0 @@
-import { Context, createContext, useContext } from "react";
-import { COMPLY_COMPANY_NAME } from "../../types";
-
-type AppbarContextType = { company: COMPLY_COMPANY_NAME } | undefined;
-
-const defaultContext: AppbarContextType = {
-  company: COMPLY_COMPANY_NAME.CONVEYOR,
-};
-
-export const AppbarContext: Context<AppbarContextType> = createContext<AppbarContextType>(
-  defaultContext,
-);
-
-export function useAppbarContext() {
-  const context = useContext<typeof defaultContext>(AppbarContext) || {
-    ...defaultContext,
-  };
-
-  return context;
-}

package/src/components/Appbar/index.css

@@ -1,324 +0,0 @@
-.ads-Appbar {
-  @apply bg-gray-900
-    text-white
-    relative
-    h-appbar
-    flex
-    items-center;
-}
-
-.ads-Appbar.isDemoEnvironment::after {
-  @apply absolute
-    bg-gold-400
-    left-0
-    origin-top-left
-    p-1
-    text-center
-    text-gray-900
-    text-h6
-    transform
-    -rotate-90;
-
-  content: "DEMO";
-  top: 100%;
-  width: theme("height.appbar");
-}
-
-/* Logo */
-
-.ads-Appbar-logo {
-  @apply relative
-    items-center
-    justify-center
-    h-full
-    px-8;
-}
-
-.ads-Appbar-logoLink {
-  @apply flex
-    items-center
-    justify-center
-    h-full
-    w-full;
-}
-
-.ads-Appbar-logo svg {
-  @apply block
-    relative;
-
-  top: 1px;
-}
-
-/* Menu */
-
-.ads-Appbar-menu,
-.ads-Appbar-menu > div {
-  @apply h-full;
-}
-
-.ads-Appbar-menuButton {
-  @apply h-full
-    transition-colors
-    ease-in-out
-    duration-200;
-}
-
-.ads-Appbar-menuButton.isOpen,
-.ads-Appbar-menuButton:hover,
-.ads-Appbar-menuButton:active,
-.ads-Appbar-menuButton:focus {
-  @apply bg-lighten-300;
-}
-
-.ads-Appbar-menuButton[disabled] {
-  @apply bg-transparent
-    cursor-default;
-}
-
-.ads-Appbar-menuButton:focus {
-  @apply outline-none;
-}
-
-.ads-Appbar-menuList {
-  @apply w-64
-    pb-2;
-}
-
-.ads-Appbar-menuItem {
-  @apply flex
-    items-center
-    w-full
-    font-medium
-    cursor-pointer
-    no-underline
-    transition-colors
-    ease-in-out
-    duration-200
-    text-left
-    px-2;
-}
-
-.ads-Appbar-menuItem:hover,
-.ads-Appbar-menuItem:active,
-.ads-Appbar-menuItem:focus {
-  @apply text-white
-    bg-lighten-300;
-}
-
-.ads-Appbar-menuItem:focus {
-  @apply outline-none;
-}
-
-/* Product Menu */
-
-.ads-Appbar-productMenuButton {
-  @apply flex
-    items-center
-    bg-transparent
-    text-white
-    text-h3
-    font-medium
-    px-4;
-}
-
-.ads-Appbar-productMenuItem {
-  @apply text-h3
-    text-white
-    py-1;
-}
-
-/* Tab Marker */
-
-.hasTabMarker {
-  @apply overflow-hidden
-    relative;
-}
-
-.ads-Appbar-tabMarker {
-  @apply absolute
-    w-full
-    bottom-0
-    left-0
-    bg-brandGreen-400;
-
-  height: 2px;
-  transform: translateY(100%);
-  transition: transform 0.2s ease;
-}
-
-.ads-Appbar-menuButton.isOpen .ads-Appbar-tabMarker,
-.ads-Appbar-tab--active .ads-Appbar-tabMarker,
-.hasTabMarker:hover .ads-Appbar-tabMarker,
-.hasTabMarker:active .ads-Appbar-tabMarker,
-.hasTabMarker:focus .ads-Appbar-tabMarker {
-  transform: translateY(0);
-}
-
-/* Tabs */
-
-.ads-Appbar-tabs {
-  @apply flex
-    h-full;
-}
-
-.ads-Appbar-tab {
-  @apply flex
-    items-center
-    h-full
-    px-2
-    text-gray-500
-    text-body
-    ease-all-fast
-    no-underline
-    cursor-pointer;
-}
-
-.ads-Appbar-tab:visited {
-  @apply text-gray-500;
-}
-
-.ads-Appbar-tab--active,
-.ads-Appbar-tab--active:visited,
-.ads-Appbar-tab:hover,
-.ads-Appbar-tab:active,
-.ads-Appbar-tab:focus {
-  @apply text-white
-    bg-lighten-300;
-}
-
-.ads-Appbar-tab:focus {
-  @apply outline-none;
-}
-
-/* User */
-
-.ads-Appbar-userName {
-  @apply items-center
-    bg-transparent
-    text-white
-    text-body
-    font-medium
-    h-full;
-}
-
-.ads-Appbar-user,
-.ads-Appbar-userMenuButton {
-  @apply px-3
-    border-l
-    border-gray-800;
-}
-
-.ads-Appbar-user {
-  @apply h-full
-    -mr-3;
-}
-
-.ads-Appbar-userMenuItem {
-  @apply text-h5
-    text-gray-500
-    py-2
-    px-3;
-}
-
-/* Organization */
-
-.ads-Appbar-organizations {
-  @apply items-center;
-}
-
-.ads-Appbar-organizations .ads-Appbar-organization:not(:last-of-type) {
-  @apply mr-4;
-}
-
-.ads-Appbar-organization {
-  @apply flex
-    items-center
-    text-gray-500
-    rounded
-    p-1
-    ease-all-fast;
-}
-
-.ads-Appbar-organization--switcher {
-  @apply cursor-pointer;
-}
-
-.ads-Appbar-organization--switcher:hover,
-.ads-Appbar-organization--switcher:active,
-.ads-Appbar-organization--switcher:focus {
-  @apply text-white;
-}
-
-.ads-Appbar-organization--switcher:focus {
-  @apply outline-none
-    bg-lighten-300;
-}
-
-.ads-Appbar-organizationLogo {
-  @apply items-center
-    justify-center
-    text-gray-600
-    h-6
-    w-6
-    rounded
-    bg-gray-800
-    ml-2;
-}
-
-.ads-Link.ads-Appbar-orgSwitcherLink {
-  @apply p-1
-    rounded
-    text-brandGreen-300;
-}
-
-.ads-Link.ads-Appbar-orgSwitcherLink:hover,
-.ads-Link.ads-Appbar-orgSwitcherLink:active,
-.ads-Link.ads-Appbar-orgSwitcherLink:focus {
-  @apply text-brandGreen-400;
-}
-
-.ads-Link.ads-Appbar-orgSwitcherLink:focus {
-  @apply outline-none
-    shadow-focusBrand;
-}
-
-.ads-Appbar-orgOptionButton {
-  @apply flex
-    items-center
-    justify-between
-    px-3
-    py-4
-    w-full
-    h-full
-    border-b
-    border-gray-800
-    transition-colors;
-}
-
-.ads-Appbar-orgOptionButton:hover,
-.ads-Appbar-orgOptionButton:active,
-.ads-Appbar-orgOptionButton:focus {
-  @apply bg-lighten-300;
-}
-
-.ads-Appbar-orgOptionButton:focus {
-  @apply outline-none;
-}
-
-.ads-Appbar-profileButton {
-  @apply flex
-    items-center
-    p-3
-    rounded-t
-    transition-colors;
-}
-
-.ads-Appbar-profileButton:hover,
-.ads-Appbar-profileButton:active,
-.ads-Appbar-profileButton:focus {
-  @apply bg-lighten-300;
-}
-
-.ads-Appbar-profileButton:focus {
-  @apply outline-none;
-}

package/src/components/Appbar/index.ts

@@ -1 +0,0 @@
-export * from "./Appbar";

package/src/components/ArrowButton/ArrowButton.story.mdx

@@ -1,110 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { ArrowButton } from "./ArrowButton";
-
-export const decorators = [
-  (storyFn) => (
-    <div className="rounded p-8" style={{ backgroundColor: "#1c2c3a" }}>
-      {storyFn()}
-    </div>
-  ),
-];
-
-<Meta
-  title="Components/Buttons/Arrow Button"
-  component={ArrowButton}
-  decorators={decorators}
-/>
-
-export const Link = ({ to, children, ...rest }) => (
-  <a href={to} {...rest}>
-    {children}
-  </a>
-);
-
-# ArrowButton
-
-ArrowButton is a call-to-action button which uses Conveyor’s branding styles.
-It’s used on pages which are outside of the app (log in, sign up pages).
-
-There are no use cases for this button to be used within the app.
-
-It should always be used on top of a dark background.
-
-ArrowButton renders as an anchor element by default. It can also render as a
-button or React Router's `Link` component by passing it to the `as` prop.
-
-```jsx
-import { ArrowButton } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="ArrowButton">
-    <ArrowButton href="/">Arrow Button</ArrowButton>
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={ArrowButton} />
-
-## Demos
-
-### Render as a button
-
-Render as a button when an onClick handler is required.
-
-<Preview>
-  <Story name="ArrowButton as button">
-    <ArrowButton
-      as="button"
-      onClick={() => {
-        console.log("Clicked");
-      }}
-    >
-      Button
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Render as a Link
-
-Render as a Link when using React Router.
-
-<Preview>
-  <Story name="ArrowButton as Link">
-    <ArrowButton as={Link} to="/">
-      Link
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="DisabledLink">
-    <ArrowButton as={Link} to="/" disabled>
-      Disabled Link
-    </ArrowButton>
-  </Story>
-  <Story name="DisabledButton">
-    <ArrowButton
-      as="button"
-      onClick={() => {
-        console.log("Clicked");
-      }}
-      disabled
-    >
-      Disabled Button
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Loading
-
-<Preview>
-  <Story name="Loading">
-    <ArrowButton as={Link} to="/" loading>
-      Loading
-    </ArrowButton>
-  </Story>
-</Preview>

package/src/components/ArrowButton/ArrowButton.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box } from "../Box";
-import { Svg } from "../Svg";
-import { bem } from "../../utilities/bem";
-import { Icon, ICON_TYPE } from "../Icon";
-
-const cn = "ArrowButton";
-
-const Arrow = () => (
-  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path d="M20 10.0006L10.2324 -4.26954e-07L7.30217 -5.5504e-07L16.093 9.0005L3.42127e-06 9.0005L3.33385e-06 11.0006L16.093 11.0006L7.30217 20L10.2324 20L20 10.0006Z" />
-  </Svg>
-);
-
-export interface ArrowButtonProps {
-  children?: string;
-  as?: any;
-  className?: string;
-  disabled?: boolean;
-  loading?: boolean;
-  [key: string]: any;
-}
-
-export const ArrowButton = ({
-  children,
-  as: Component = "a",
-  className,
-  disabled,
-  loading,
-  ...rest
-}: ArrowButtonProps) => {
-  const isDisabled = disabled || loading;
-  return (
-    <Component
-      className={classNames(
-        bem(cn),
-        isDisabled && bem(cn, { m: "disabled" }),
-        className,
-      )}
-      disabled={Component === "button" && isDisabled}
-      {...rest}
-    >
-      {children}
-      <Box className={bem(cn, { e: "arrow" })}>
-        {loading ? (
-          <Icon className="arrow-button-arrow" icon={ICON_TYPE.SPINNER} spin />
-        ) : (
-          <Arrow />
-        )}
-      </Box>
-    </Component>
-  );
-};