design-react-kit 3.3.0 → 4.0.0

package/src/Header/HeaderContent.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import classNames from 'classnames';
+import { Navbar } from 'reactstrap';
+
+import { HeaderContext, SLIM, CENTER, NAVBAR } from './HeaderContext';
+
+export interface HeaderContentProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente HeaderContent */
+  className?: string;
+  /** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */
+  megamenu?: boolean;
+  /** Parametro per il controllo responsive del componente secondo Bootstrap Italia. */
+  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export class HeaderContent extends PureComponent<HeaderContentProps> {
+  static contextType = HeaderContext;
+  render() {
+    const { className, megamenu, ...attributes } = this.props;
+    const { type } = this.context;
+    const classes = classNames(className, {
+      'it-header-slim-wrapper-content': type === SLIM,
+      'it-header-center-content-wrapper': type === CENTER,
+      navbar: type === NAVBAR,
+      'has-megamenu': megamenu
+    });
+
+    const Content =
+      type === NAVBAR ? (
+        <Navbar className={classes} {...attributes} />
+      ) : (
+        <div className={classes} {...attributes} />
+      );
+    return (
+      <div className='container'>
+        <div className='row'>
+          <div className='col-12'>{Content}</div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/Header/HeaderContext.tsx

@@ -0,0 +1,9 @@
+import React, { Context } from 'react';
+
+export const SLIM = 'slim';
+export const CENTER = 'center';
+export const NAVBAR = 'navbar';
+
+export const HeaderContext: Context<{
+  type?: typeof SLIM | typeof CENTER | typeof NAVBAR;
+}> = React.createContext({});

package/src/Header/HeaderLinkZone.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface HeaderLinkZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
+  className?: string;
+}
+
+export const HeaderLinkZone: FC<HeaderLinkZoneProps> = ({
+  className,
+  ...attributes
+}) => {
+  const classes = classNames(className);
+  return (
+    <div className='nav-mobile'>
+      <nav className={classes} {...attributes} />
+    </div>
+  );
+};

package/src/Header/HeaderRightZone.tsx

@@ -0,0 +1,26 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { HeaderContext, SLIM } from './HeaderContext';
+
+export interface HeaderRightZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
+  className?: string;
+}
+
+export class HeaderRightZone extends PureComponent<HeaderRightZoneProps> {
+  static contextType = HeaderContext;
+
+  render() {
+    const { className, ...attributes } = this.props;
+    const { type } = this.context;
+    const classes = classNames(className, {
+      // BI >= 1.3.6
+      'it-header-slim-right-zone': type === SLIM,
+      // BI < 1.3.6
+      'header-slim-right-zone': type === SLIM,
+      'it-right-zone': type !== SLIM
+    });
+    return <div className={classes} {...attributes} />;
+  }
+}

package/src/Header/HeaderSearch.tsx

@@ -0,0 +1,33 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface HeaderSearchProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente HeaderSearch */
+  className?: string;
+  /** Etichetta di testo da applicare all'elemento. In caso di stringa vuota non verrà mostrato alcun testo */
+  label: string;
+  /** Nome dell'icona da utilizzare */
+  iconName: string;
+  /** Indirizzo di indirizzamento al click dell'icona */
+  href?: string;
+}
+
+export const HeaderSearch: FC<HeaderSearchProps> = ({
+  className,
+  label,
+  href,
+  iconName = 'it-search',
+  ...attributes
+}) => {
+  const classes = classNames('it-search-wrapper', className);
+  return (
+    <div className={classes} {...attributes}>
+      {label && <span className='d-none d-md-block'>{label}</span>}
+      <a className='search-link rounded-icon' aria-label={label} href={href}>
+        <Icon icon={iconName} />
+      </a>
+    </div>
+  );
+};

package/src/Header/HeaderSocialsZone.tsx

@@ -0,0 +1,26 @@
+import React, { FC, HTMLAttributes, ReactChild } from 'react';
+import classNames from 'classnames';
+
+export interface HeaderSocialsZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderSocialsZone, verrà applicato all'elemento wrapper più esterno. */
+  className?: string;
+  /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */
+  label?: string;
+  /** Utilizzato per elencare i social da mostrare */
+  children?: ReactChild;
+}
+
+export const HeaderSocialsZone: FC<HeaderSocialsZoneProps> = ({
+  className,
+  children,
+  label,
+  ...attributes
+}) => {
+  const classes = classNames('it-socials d-none d-md-flex', className);
+  return (
+    <div className={classes} {...attributes}>
+      {label && <span>{label}</span>}
+      {children}
+    </div>
+  );
+};

package/src/Header/HeaderToggler.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent, ElementType, ButtonHTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { NavbarToggler } from 'reactstrap';
+
+import { HeaderContext, SLIM, NAVBAR } from './HeaderContext';
+
+export interface HeaderTogglerProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Tipo di elemento DOM da utilizzare: di default "a" per Header Slim, "button" per altri tipi di Header.
+   * Se fornito questo sovrascriverà il valore di default.
+   */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente HeaderToggler */
+  className?: string;
+  /** Indica l'attributo "type" sull'elemento DOM. Di default '' per Header Slim, "button" per altri tipi di Header.
+   * Se fornito questo sovrascriverà il valore di default.
+   */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export class HeaderToggler extends PureComponent<HeaderTogglerProps> {
+  static contextType = HeaderContext;
+  render() {
+    const { className, tag, type, ...attributes } = this.props;
+    const { type: HeaderType } = this.context;
+    const BUTTON = 'button';
+    const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
+    const defaultType = HeaderType === SLIM ? undefined : BUTTON;
+    const classes = classNames(
+      {
+        'it-opener d-lg-none': HeaderType === SLIM,
+        'custom-navbar-toggler': HeaderType === NAVBAR
+      },
+      className
+    );
+    return (
+      <NavbarToggler
+        className={classes}
+        {...attributes}
+        tag={tag || defaultTag}
+        type={type || defaultType}
+        href='#'
+      />
+    );
+  }
+}

package/src/{components/Header/Headers.js → Header/Headers.tsx}

@@ -1,23 +1,22 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Sticky, StickyProvider } from 'react-stickup'
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { Sticky, StickyProvider } from 'react-stickup';
 
-const propTypes = {
+export interface HeadersProps extends HTMLAttributes<HTMLElement> {
   /** Aggiunge un ombra per enfatizzare il componente rispetto alla pagina in cui è contenuto */
-  shadow: PropTypes.bool,
+  shadow?: boolean;
   /** Aggiunge il comportamento "sticky" ai componenti Header contenuti */
-  sticky: PropTypes.bool,
+  sticky?: boolean;
   /** Classi addizionali per il componente Headers */
-  className: PropTypes.string
+  className?: string;
 }
 
-const defaultProps = {
-  shadow: false,
-  sticky: false
-}
-
-const Headers = ({ className, shadow, sticky, ...attributes }) => {
+export const Headers: FC<HeadersProps> = ({
+  className,
+  shadow = false,
+  sticky = false,
+  ...attributes
+}) => {
   const classes = classNames(
     'it-header-wrapper',
     {
@@ -25,9 +24,9 @@ const Headers = ({ className, shadow, sticky, ...attributes }) => {
       'it-header-sticky': sticky
     },
     className
-  )
+  );
   if (!sticky) {
-    return <div className={classes} {...attributes}></div>
+    return <div className={classes} {...attributes}></div>;
   }
   return (
     <StickyProvider>
@@ -35,9 +34,5 @@ const Headers = ({ className, shadow, sticky, ...attributes }) => {
         <div className={classes} {...attributes}></div>
       </Sticky>
     </StickyProvider>
-  )
-}
-
-Headers.propTypes = propTypes
-Headers.defaultProps = defaultProps
-export default Headers
+  );
+};

package/src/Hero/Hero.tsx

@@ -0,0 +1,34 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classname from 'classnames';
+
+export interface HeroProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Indica se il componente Hero deve ridurre l'altezza */
+  small?: boolean;
+  /** Indica al componente Hero di centrare i contenuti testuali orizzontalmente */
+  centered?: boolean;
+  /** Da utilizzare per creare un testi in overlay su immagini, al fine di migliorare la leggibilità di testo */
+  overlay?: 'dark' | 'primary' | 'filter';
+  /** Aggiunge margine negativo in fondo al componente Hero per creare una sovrapposizione con il contenuto seguente. */
+  overlap?: boolean;
+}
+
+export const Hero: FC<HeroProps> = ({
+  tag: Tag = 'div',
+  small,
+  centered,
+  overlay,
+  overlap,
+  className,
+  ...attributes
+}) => {
+  const classes = classname('it-hero-wrapper', className, {
+    'it-overlay': overlay,
+    ['it-' + overlay]: overlay,
+    'it-hero-small-size': small,
+    'it-text-centered': centered,
+    'it-bottom-overlapping-content': overlap
+  });
+  return <Tag className={classes} {...attributes} />;
+};

package/src/Hero/HeroBackground.tsx

@@ -0,0 +1,25 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+export interface HeroBackgroundProps extends HTMLAttributes<HTMLImageElement> {
+  /** Un testo alternativo per descrivere l'immagine mostrata */
+  alt: string;
+  /** L'URI dell'immagine da mostrare */
+  src: string;
+  /** Il titolo dell'immagine */
+  title?: string;
+}
+
+export const HeroBackground: FC<HeroBackgroundProps> = ({
+  alt,
+  ...attributes
+}) => {
+  return (
+    <div className='img-responsive-wrapper'>
+      <div className='img-responsive'>
+        <div className='img-wrapper'>
+          <img {...attributes} alt={alt} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Hero/HeroBody.tsx

@@ -0,0 +1,21 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+import { Col, Container, Row } from 'reactstrap';
+
+export interface HeroBodyProps extends HTMLAttributes<HTMLElement> {
+  /** Eventuali classi aggiuntive */
+  className?: string;
+}
+
+export const HeroBody: FC<HeroBodyProps> = ({ children, className }) => {
+  const classes = classname('it-hero-text-wrapper', 'bg-dark', className);
+  return (
+    <Container>
+      <Row>
+        <Col>
+          <div className={classes}>{children}</div>
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/Hero/HeroButton.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import classname from 'classnames';
+import { Button, ButtonProps } from '../Button/Button';
+
+export interface HeroButtonProps extends ButtonProps {
+  wrapperClassName?: string;
+}
+
+export const HeroButton: FC<HeroButtonProps> = ({
+  wrapperClassName,
+  ...attributes
+}) => {
+  const classes = classname('it-btn-container', wrapperClassName);
+  return (
+    <div className={classes}>
+      <Button size='sm' {...attributes} />
+    </div>
+  );
+};

package/src/Hero/HeroCategory.tsx

@@ -0,0 +1,15 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface HeroCategoryProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Eventuali classi aggiuntive per la categoria */
+  className?: string;
+}
+
+export const HeroCategory: FC<HeroCategoryProps> = ({
+  className,
+  ...attributes
+}) => {
+  const classes = classname('it-category', className);
+  return <span {...attributes} className={classes} />;
+};

package/src/Hero/HeroTitle.tsx

@@ -0,0 +1,16 @@
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface HeroTitleProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Indica il tag da utilizzare per il titolo */
+  tag?: ElementType;
+}
+
+export const HeroTitle: FC<HeroTitleProps> = ({
+  tag: Tag = 'h1',
+  className,
+  ...attributes
+}) => {
+  const classes = classname(className);
+  return <Tag {...attributes} className={classes} />;
+};

package/src/Hero/index.ts

@@ -0,0 +1,13 @@
+export { Hero } from './Hero';
+export { HeroBackground } from './HeroBackground';
+export { HeroBody } from './HeroBody';
+export { HeroButton } from './HeroButton';
+export { HeroCategory } from './HeroCategory';
+export { HeroTitle } from './HeroTitle';
+
+export type { HeroProps } from './Hero';
+export type { HeroBackgroundProps } from './HeroBackground';
+export type { HeroBodyProps } from './HeroBody';
+export type { HeroButtonProps } from './HeroButton';
+export type { HeroCategoryProps } from './HeroCategory';
+export type { HeroTitleProps } from './HeroTitle';

package/src/Icon/EmptyIcon.tsx

@@ -0,0 +1,7 @@
+import React, { FC, SVGProps } from 'react';
+
+export const EmptyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <path fill='none' d='M0 0h24v24H0z' />
+  </svg>
+);

package/src/Icon/Icon.tsx

@@ -0,0 +1,116 @@
+import React, {
+  FC,
+  ImgHTMLAttributes,
+  SVGProps,
+  useEffect,
+  useState
+} from 'react';
+import classNames from 'classnames';
+import { isBundledIcon, loadIcon, allIcons, IconName } from './assets';
+import { EmptyIcon } from './EmptyIcon';
+export type { IconName } from './assets';
+
+export const iconsList = allIcons;
+
+let iconsCache: Record<IconName, FC<SVGProps<SVGSVGElement>>> = {};
+
+/**
+ * Preload a list of icons in cache
+ * @param icons - the list of icons to preload
+ * @returns true if the icons have been preloaded
+ */
+export async function preloadIcons(icons: IconName[]) {
+  const preloadedIcons = await Promise.all(icons.map((icon) => loadIcon(icon)));
+  preloadedIcons.forEach(({ component }, i) => {
+    iconsCache[icons[i]] = ((() => component) as unknown) as FC<
+      SVGProps<SVGSVGElement>
+    >;
+  });
+  return true;
+}
+
+/**
+ * Removes icons from cache
+ * @param icon? - the icon to remove, or nothing to clear the whole cache
+ * @returns an object containing the removed icons
+ */
+export const clearIconCache = (iconName?: IconName) => {
+  let deletedItems;
+  if (iconName) {
+    deletedItems = { iconName: iconsCache[iconName] };
+    delete iconsCache[iconName];
+  } else {
+    deletedItems = { ...iconsCache };
+    iconsCache = {};
+  }
+  return deletedItems;
+};
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
+  /** Le dimensioni dell'icona. In ordine dalla più grande alla più piccola: "xl", "lg", '' (stringa vuota), "sm", "xs". */
+  size?: 'xl' | 'lg' | '' | 'sm' | 'xs';
+  /**
+   * Il nome dell'icona da mostrare. Per una lista completa vedi:
+   * <a href="https://italia.github.io/design-react-kit/?path=/story/componenti-icon--lista-icone" target="_blank">Lista icone</a>
+   * */
+  icon: string;
+  /** Quando abilitato riduce la dimensione dell'icona all'interno del contenitore.  */
+  padding?: boolean;
+  /** Funzione chiamata al caricamento dell'icona */
+  onIconLoad?: () => void;
+}
+
+export const Icon: FC<IconProps> = ({
+  color = '',
+  size = '',
+  icon = '',
+  className,
+  padding = false,
+  onIconLoad,
+  ...attributes
+}) => {
+  const [IconComponent, setCurrentIcon] = useState<FC<SVGProps<SVGSVGElement>>>(
+    iconsCache[icon]
+  );
+  const classes = classNames('icon', className, {
+    [`icon-${color}`]: color,
+    [`icon-${size}`]: size,
+    'icon-padded': padding
+  });
+
+  useEffect(() => {
+    if (isBundledIcon(icon) && !iconsCache[icon]) {
+      loadIcon(icon).then(({ component }) => {
+        iconsCache[icon] = ((() => component) as unknown) as FC<
+          SVGProps<SVGSVGElement>
+        >;
+        setCurrentIcon(iconsCache[icon]);
+        onIconLoad?.();
+      });
+    } else {
+      onIconLoad?.();
+    }
+  }, [icon, onIconLoad]);
+
+  if (!isBundledIcon(icon)) {
+    // assume it's an image and let the browser do its job
+    return (
+      // eslint-disable-next-line jsx-a11y/alt-text
+      <img
+        src={icon}
+        className={classes}
+        {...(attributes as ImgHTMLAttributes<HTMLImageElement>)}
+      />
+    );
+  }
+
+  if (!IconComponent) {
+    return <EmptyIcon className={classes} role='img' {...attributes} />;
+  }
+
+  return <IconComponent className={classes} role='img' {...attributes} />;
+};

package/src/Icon/assets/ItArrowDown.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M17.9 13.2l-5.4 5.3V3h-1v15.5l-5.4-5.3-.7.7 6.6 6.5 6.6-6.5zM12 19z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowDownCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M15.6 13.2l.7.7-4.3 4.3-4.3-4.3.7-.7 3.1 3.1V7h1v9.2zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowDownTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M9.2 12h5.6a1 1 0 01.7 1.7L12 17.3l-3.5-3.6a1 1 0 01.7-1.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeft.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M21 11.5H5.5l5.3-5.4-.7-.7L3.6 12l6.5 6.6.7-.7-5.3-5.4H21zM5 12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeftCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M7.7 11.5H17v1H7.8l3 3.1-.7.7L5.8 12l4.3-4.3.7.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowLeftTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 9.2v5.6a1 1 0 01-1.7.7L6.8 12l3.5-3.5a1 1 0 011.7.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRight.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M13.9 5.4l-.7.7 5.3 5.4H3v1h15.5l-5.3 5.4.7.7 6.6-6.6zM19 12z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRightCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M13.9 7.7l4.3 4.3-4.3 4.3-.7-.7 3.1-3.1H7v-1h9.2l-3-3.1zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowRightTriangle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 14.8V9.2a1 1 0 011.7-.7l3.5 3.5-3.5 3.5a1 1 0 01-1.7-.7z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowUp.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M18.6 10.1L12 3.5l-6.6 6.6.7.7 5.4-5.3V21h1V5.5l5.4 5.3zM12 5z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};

package/src/Icon/assets/ItArrowUpCircle.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export const component = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+      <path d='M12 5.8l4.3 4.3-.7.7-3.1-3.1V17h-1V7.8l-3.1 3-.7-.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
+      <path fill='none' d='M0 0h24v24H0z' />
+    </svg>
+  );
+};