@bitrise/bitkit 10.1.0-alpha-breadcrumb.3 → 10.1.0

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,30 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Breadcrumb from './Breadcrumb';
-import BreadcrumbLink from './BreadcrumbLink';
-
-export default {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  subcomponents: { BreadcrumbLink },
-} as ComponentMeta<typeof Breadcrumb>;
-
-const Template: ComponentStory<typeof Breadcrumb> = (props) => (
-  <Breadcrumb {...props}>
-    <BreadcrumbLink
-      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-      href="#"
-    >
-      Bitrise #Core
-    </BreadcrumbLink>
-    <BreadcrumbLink avatarName="Bitkit" href="#">
-      bitkit
-    </BreadcrumbLink>
-    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
-  </Breadcrumb>
-);
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  hasSeparatorAfterLast: false,
-  hasSeparatorBeforeFirst: false,
-};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -1,25 +0,0 @@
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
-
-const BreadcrumbTheme: SystemStyleObject = {
-  baseStyle: {
-    container: {
-      '> ol': {
-        display: 'flex',
-        alignItems: 'center',
-      },
-    },
-    link: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8',
-      '[aria-current]': {
-        color: 'red',
-      },
-    },
-    separator: {
-      display: 'flex',
-    },
-  },
-};
-
-export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,51 +0,0 @@
-import { Children } from 'react';
-import {
-  Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbProps as ChakraBreadcrumbProps,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-  forwardRef,
-  useBreakpointValue,
-} from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
-import Icon, { TypeIconName } from '../Icon/Icon';
-
-export interface BreadcrumbProps extends ChakraBreadcrumbProps {
-  hasSeparatorAfterLast?: boolean;
-  hasSeparatorBeforeFirst?: boolean;
-  separatorIconName?: TypeIconName;
-}
-
-/**
- * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
- */
-const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
-  const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
-
-  const childrenCount = Children.count(children);
-  const items = Children.map(children, (child, index) => {
-    return (
-      <BreadcrumbItem>
-        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator marginLeft="0" />}
-        {child}
-        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
-      </BreadcrumbItem>
-    );
-  });
-
-  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
-  const properties = {
-    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
-    ...rest,
-  };
-  return (
-    <ChakraBreadcrumb {...properties} ref={ref}>
-      {items}
-    </ChakraBreadcrumb>
-  );
-});
-
-Breadcrumb.defaultProps = {};
-
-export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -1,34 +0,0 @@
-import {
-  BreadcrumbLink as ChakraBreadcrumbLink,
-  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
-  forwardRef,
-  useBreakpointValue,
-} from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
-import Avatar from '../Avatar/Avatar';
-
-export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
-  avatarName?: string;
-  avatarUrl?: string;
-}
-
-const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
-  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
-
-  const properties: ChakraBreadcrumbLinkProps = {
-    color: isCurrentPage ? 'neutral.40' : 'inherit',
-    isCurrentPage,
-    ...rest,
-  };
-  return (
-    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
-      {!isMobile && (avatarName || avatarUrl) && (
-        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
-      )}
-      {children}
-    </ChakraBreadcrumbLink>
-  );
-});
-
-export default BreadcrumbLink;

package/src/Old/Hamburger/Hamburger.css

@@ -1,55 +0,0 @@
-:root {
-  --Hamburger--bar-height: 0.125rem;
-}
-
-.Hamburger {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.Hamburger::before,
-.Hamburger::after,
-.Hamburger--bar,
-.Hamburger--bar::before {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: var(--Hamburger--bar-height);
-  transform: translateY(-50%);
-  border-radius: var(--Hamburger--bar-height);
-  background-color: currentColor;
-  transition-property: opacity, transform;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Hamburger::before,
-.Hamburger::after,
-.Hamburger--bar::before {
-  content: '';
-}
-
-.Hamburger::before { transform: translateY(-300%); }
-.Hamburger::after { transform: translateY(200%); }
-
-.Hamburger--bar::before {
-  opacity: 0;
-}
-
-.Hamburger--active::before,
-.Hamburger--active::after {
-  transform: translateY(-50%);
-  opacity: 0;
-}
-
-.Hamburger--active .Hamburger--bar {
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.Hamburger--active .Hamburger--bar::before {
-  transform: translateY(-50%) rotate(-90deg);
-  opacity: 1;
-}

package/src/Old/Hamburger/Hamburger.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Hamburger.css';
-
-export interface Props extends BaseProps {
-  /** Sets the active state of the icon. */
-  active?: boolean;
-  /** Sets the size of the icon */
-  size?: string;
-}
-
-/**
- * An animating Hamburger icon, ideal for those mobile menus.
- */
-const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, size, ...rest } = props;
-  const classes = classnames('Hamburger', {
-    'Hamburger--active': active,
-  });
-
-  return (
-    <Base {...rest} className={classes} height={size} width={size}>
-      <div className="Hamburger--bar" />
-    </Base>
-  );
-};
-
-Hamburger.defaultProps = {
-  size: '1.5rem',
-};
-
-export default Hamburger;