@integrigo/integrigo-ui 1.6.16 → 1.6.17-a

package/src/components/atoms/Chip/Chip.tsx

@@ -1,101 +1,95 @@
-import React, { MouseEvent, FC } from 'react';
-import styled from 'styled-components';
-import { Icon, IconType } from '../Icon';
+import { MouseEvent, FC } from "react";
+import styled from "styled-components";
+import { Icon, IconType } from "../Icon";
 
 type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
 
 export interface ChipProps {
-  iconLeft?: IconType,
-  iconRight?: IconType,
-  size?: ChipSize,
-  label: string;
-  variant?: ChipVariant;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  size?: 's' | 'm' | 'l' | 'xl';
+  label: React.ReactNode;
+  variant?: 'transparent' | 'white' | 'primary' | 'secondary' | 'grey';
   onClick?: OnClickFunctionType;
 }
 
-export enum ChipVariant {
-  transparent = 'transparent',
-  white = 'white',
-  primary = 'primary',
-  secondary = 'secondary',
-}
-
-export enum ChipSize {
-  xl = 'xl',
-  l = 'l',
-  m = 'm',
-  s = 's',
-}
-
 const sizeVariant = {
   xl: {
     iconSize: {
       width: 25,
       height: 25,
     },
-    gap: '12.5px',
-    paddingY: '12.5px',
-    paddingX: '17.5px',
-    border: '2px',
-    fontSize: '20px',
-    lineHeight: '30px',
+    gap: "12.5px",
+    paddingY: "12.5px",
+    paddingX: "17.5px",
+    border: "2px",
+    fontSize: "20px",
+    lineHeight: "30px",
   },
   l: {
     iconSize: {
       width: 20,
       height: 20,
     },
-    gap: '10px',
-    paddingY: '10px',
-    paddingX: '14px',
-    border: '2px',
-    fontSize: '16px',
-    lineHeight: '24px',
+    gap: "10px",
+    paddingY: "10px",
+    paddingX: "14px",
+    border: "2px",
+    fontSize: "16px",
+    lineHeight: "24px",
   },
   m: {
     iconSize: {
       width: 15,
       height: 15,
     },
-    gap: '7.5px',
-    paddingY: '7.5px',
-    paddingX: '10.5px',
-    border: '2px',
-    fontSize: '12px',
-    lineHeight: '18px',
+    gap: "7.5px",
+    paddingY: "7.5px",
+    paddingX: "10.5px",
+    border: "2px",
+    fontSize: "12px",
+    lineHeight: "18px",
   },
   s: {
     iconSize: {
       width: 10,
       height: 10,
     },
-    gap: '5px',
-    paddingY: '5px',
-    paddingX: '7px',
-    border: '1.5px',
-    fontSize: '8px',
-    lineHeight: '12px',
+    gap: "5px",
+    paddingY: "5px",
+    paddingX: "7px",
+    border: "1.5px",
+    fontSize: "8px",
+    lineHeight: "12px",
   },
 };
 
 const colorVariant = {
   primary: {
-    fontColor: 'var(--shades-of-grey-0)',
+    fontColor: "var(--shades-of-grey-0)",
   },
   secondary: {
-    fontColor: 'var(--color-orange)',
+    fontColor: "var(--color-orange)",
   },
   transparent: {
-    fontColor: 'var(--shades-of-grey-100)',
+    fontColor: "var(--shades-of-grey-100)",
   },
   white: {
-    fontColor: 'var(--shades-of-grey-100);',
+    fontColor: "var(--shades-of-grey-100);",
+  },
+  grey: {
+    fontColor: "var(--shades-of-grey-100)",
   },
 };
 
 export const Chip: FC<ChipProps> = (props: ChipProps) => {
   const {
-    iconLeft, iconRight, label, size = ChipSize.m, variant = ChipVariant.primary, onClick,
+    iconLeft,
+    iconRight,
+    label,
+    size = 'm',
+    variant = 'primary',
+    onClick,
   } = props;
 
   return (
@@ -123,16 +117,18 @@ export const Chip: FC<ChipProps> = (props: ChipProps) => {
   );
 };
 
-const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
+const getVariantStyles = (variant: ChipProps['variant'], clickable: boolean): string => {
   switch (variant) {
-    case ChipVariant.secondary:
+    case 'secondary':
       return `
         background-color: var(--color-white);
         opacity: 0.9;
         border-color: var(--color-orange);
         border-style: solid;
         
-        ${clickable && `
+        ${
+          clickable &&
+          `
           cursor: pointer;
           
           &:hover {
@@ -142,11 +138,14 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             opacity: 0.65;
           }
-        `}
+        `
+        }
       `;
-    case ChipVariant.transparent:
+    case 'transparent':
       return `        
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             background-color: var(--shades-of-grey-40);
           }
@@ -154,15 +153,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             background-color: var(--shades-of-grey-60);
           }
-        `}
+        `
+        }
+      `;
+    case 'grey':
+      return `
+        background-color: var(--shades-of-grey-20);
+        
+        ${
+          clickable &&
+          `
+          &:hover {
+            background-color: var(--shades-of-grey-40);
+          }
+          
+          &:active {
+            background-color: var(--shades-of-grey-40);
+          }
+        `
+        }
       `;
-    case ChipVariant.white:
+    case 'white':
       return `
         background-color: var(--color-white);
         border-color: var(--shades-of-grey-40);
         border-style: solid;
         
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             background-color: var(--shades-of-grey-20);
           }
@@ -170,16 +189,19 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
            border-color: var(--shades-of-grey-100);
           }
-        `}
+        `
+        }
       `;
-    case ChipVariant.primary:
+    case 'primary':
     default:
       return `
         background-color: var(--color-orange);
         border-color: var(--color-orange);
         border-style: solid;
 
-        ${clickable && `
+        ${
+          clickable &&
+          `
           &:hover {
             opacity: 0.8;
           }
@@ -187,27 +209,35 @@ const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
           &:active {
             opacity: 0.65;
           }
-        `}
+        `
+        }
       `;
   }
 };
 
-Chip.displayName = 'Chip';
+Chip.displayName = "Chip";
 
-const ChipWrapper = styled.div<{ size: ChipSize, variant: ChipVariant, onClick?: OnClickFunctionType }>`
+const ChipWrapper = styled.div<{
+  size: Exclude<ChipProps['size'], undefined>;
+  variant: Exclude<ChipProps['variant'], undefined>;
+  onClick?: OnClickFunctionType;
+}>`
   border-radius: 100px;
   display: flex;
   justify-content: center;
   width: min-content;
-  
+
   ${(p) => `
     border-width: ${sizeVariant[p.size].border};
     padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
     color: ${colorVariant[p.variant].fontColor};
-    ${getVariantStyles(p.variant, typeof p.onClick === 'function')}
-    ${typeof p.onClick === 'function' && `
+    ${getVariantStyles(p.variant, typeof p.onClick === "function")}
+    ${
+      typeof p.onClick === "function" &&
+      `
       cursor: pointer;
-    `}
+    `
+    }
   `}
 `;
 
@@ -216,10 +246,10 @@ const IconWrapper = styled.span`
   align-items: center;
 `;
 
-IconWrapper.displayName = 'IconWrapper';
+IconWrapper.displayName = "IconWrapper";
 
 const Text = styled.span<{
-  size: ChipSize
+  size: Exclude<ChipProps['size'], undefined>;
 }>`
   color: inherit;
   font-weight: bold;
@@ -230,4 +260,4 @@ const Text = styled.span<{
   `}
 `;
 
-Text.displayName = 'Text';
+Text.displayName = "Text";

package/src/components/atoms/DateTime/DateTime.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { DateTime } from './DateTime';
+
+export default {
+  title: 'Atoms/DateTime',
+  component: DateTime,
+  argTypes: {
+    format: {
+      name: 'format',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof DateTime>;
+
+const Template: ComponentStory<typeof DateTime> = (args) => <DateTime {...args} />;
+
+export const Basic = Template.bind({
+  date: new Date('2022-10-10 11:23')
+});

package/src/components/atoms/DateTime/DateTime.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import styled from "styled-components";
+import dayjs from "dayjs";
+
+import "dayjs/locale/pl";
+import "dayjs/locale/en";
+
+const DEFAULT_FORMAT = "DD-MM-YYYY | HH:mm";
+
+export interface DateTimeProps {
+  date: Date;
+  format?: string;
+  locale?: "en" | "pl";
+  size?: "xl" | "l" | "m" | "s";
+}
+
+const sizeVariant = {
+  xl: 20,
+  l: 16,
+  m: 12,
+  s: 8,
+};
+
+export const DateTime: React.FC<DateTimeProps> = ({
+  date,
+  format = DEFAULT_FORMAT,
+  locale = "en",
+  size = "m",
+}) => {
+  const dateTime = dayjs(date).locale(locale).format(format);
+
+  return <DateTimeString size={size}>{dateTime}</DateTimeString>;
+};
+
+const DateTimeString = styled.span<{
+  size: Exclude<DateTimeProps["size"], undefined>;
+}>`
+  font-size: ${(p) => sizeVariant[p.size]}px;
+`;

package/src/components/atoms/DateTime/index.ts

@@ -0,0 +1 @@
+export { DateTime } from './DateTime'

package/src/components/atoms/Icon/Icon.tsx

@@ -6,6 +6,7 @@ import ArrowLeft from "./icons/ArrowLeft";
 import ArrowRight from "./icons/ArrowRight";
 import Bars from "./icons/Bars";
 import Bell from "./icons/Bell";
+import CalendarSlash from "./icons/CalendarSlash";
 import CheckCircle from "./icons/CheckCircle";
 import CheckSquare from "./icons/CheckSquare";
 import ClipboardNotes from "./icons/ClipboardNotes";
@@ -43,6 +44,7 @@ export const iconHashMap = {
   "arrow-right": ArrowRight,
   bars: Bars,
   bell: Bell,
+  "calendar-slash": CalendarSlash,
   "check-circle": CheckCircle,
   "check-square": CheckSquare,
   "clipboad-notes": ClipboardNotes,

package/src/components/atoms/Icon/icons/CalendarSlash.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const CalendarSlash: React.FCS = (props) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11.6599 7H14.9999V8C14.9999 8.26522 15.1053 8.51957 15.2928 8.70711C15.4804 8.89465 15.7347 9 15.9999 9C16.2652 9 16.5195 8.89465 16.707 8.70711C16.8946 8.51957 16.9999 8.26522 16.9999 8V7H17.9999C18.2652 7 18.5195 7.10536 18.707 7.2929C18.8946 7.48043 18.9999 7.73479 18.9999 8V11H17.6599C17.3947 11 17.1404 11.1054 16.9528 11.2929C16.7653 11.4804 16.6599 11.7348 16.6599 12C16.6599 12.2652 16.7653 12.5196 16.9528 12.7071C17.1404 12.8946 17.3947 13 17.6599 13H18.9999V14.34C18.9999 14.6052 19.1053 14.8596 19.2928 15.0471C19.4804 15.2346 19.7347 15.34 19.9999 15.34C20.2652 15.34 20.5195 15.2346 20.707 15.0471C20.8946 14.8596 20.9999 14.6052 20.9999 14.34V8C20.9999 7.20435 20.6839 6.44129 20.1213 5.87868C19.5587 5.31607 18.7956 5 17.9999 5H16.9999V4C16.9999 3.73479 16.8946 3.48043 16.707 3.2929C16.5195 3.10536 16.2652 3 15.9999 3C15.7347 3 15.4804 3.10536 15.2928 3.2929C15.1053 3.48043 14.9999 3.73479 14.9999 4V5H11.6599C11.3947 5 11.1404 5.10536 10.9528 5.2929C10.7653 5.48043 10.6599 5.73479 10.6599 6C10.6599 6.26522 10.7653 6.51957 10.9528 6.70711C11.1404 6.89465 11.3947 7 11.6599 7ZM21.7099 20.29L20.1099 18.69L3.70994 2.29C3.6167 2.19676 3.50601 2.1228 3.38419 2.07234C3.26237 2.02188 3.1318 1.99591 2.99994 1.99591C2.86808 1.99591 2.73751 2.02188 2.61569 2.07234C2.49387 2.1228 2.38318 2.19676 2.28994 2.29C2.10164 2.47831 1.99585 2.7337 1.99585 3C1.99585 3.2663 2.10164 3.5217 2.28994 3.71L4.19994 5.61C3.8287 5.88843 3.52711 6.24918 3.31889 6.66389C3.11067 7.0786 3.00149 7.53596 2.99994 8V18C2.99994 18.7957 3.31601 19.5587 3.87862 20.1213C4.44123 20.6839 5.20429 21 5.99994 21H17.9999C18.4469 20.9974 18.8877 20.8949 19.2899 20.7L20.2899 21.7C20.3829 21.7937 20.4935 21.8681 20.6154 21.9189C20.7372 21.9697 20.8679 21.9958 20.9999 21.9958C21.132 21.9958 21.2627 21.9697 21.3845 21.9189C21.5064 21.8681 21.617 21.7937 21.7099 21.7C21.8962 21.5126 22.0007 21.2592 22.0007 20.995C22.0007 20.7308 21.8962 20.4774 21.7099 20.29ZM4.99994 8C5.00207 7.7962 5.06642 7.59791 5.18438 7.4317C5.30234 7.26549 5.46827 7.13929 5.65994 7.07L9.58994 11H4.99994V8ZM5.99994 19C5.73472 19 5.48037 18.8946 5.29283 18.7071C5.1053 18.5196 4.99994 18.2652 4.99994 18V13H11.5899L17.5899 19H5.99994Z" />
+  </svg>
+);
+
+export default CalendarSlash;

package/src/components/atoms/Initials/Initials.tsx

@@ -27,6 +27,7 @@ const Root = styled.div<{ size: number, color: string }>`
   background-color: ${p => p.color};
   color: var(--color-white);
   display: flex;
+  font-size: ${p => `calc(${p.size}px / 2)`};
   align-items: center;
   justify-content: center;
   text-transform: uppercase;

package/src/components/atoms/index.ts

@@ -2,6 +2,7 @@ export { Alert } from "./Alert";
 export { Avatar } from "./Avatar";
 export { Card } from "./Card";
 export { Divider } from "./Divider";
+export { DateTime } from "./DateTime";
 export { Icon } from "./Icon";
 export { Pill } from "./Pill";
 export { Typography } from "./Typography";

package/src/components/molecules/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { getValidationTypeProps } from '../../../helpers/validation';
 import { ValidationType } from '../../../types/validation';
@@ -13,12 +13,12 @@ export interface DropdwonStaticProps {
 
 export interface DropdownProps
   extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-  validationType: ValidationType;
+  validationType?: ValidationType;
   label?: string;
-  size: 'xl' | 'l' | 'm' | 's';
+  size?: 'xl' | 'l' | 'm' | 's';
 }
 
-const Dropdown = React.forwardRef<HTMLSelectElement, DropdownProps>(
+const Dropdown = React.forwardRef<HTMLSelectElement, PropsWithChildren<DropdownProps>>(
   ({ children, label, size = 'm', ...props }, ref) => {
     return (
       <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>

package/src/components/molecules/Dropdown/Option.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from "react";
 
-export const Option: React.FC = ({ children }) => {
-  return <option>{children}</option>;
+export interface OptionProps {
+  value?: string | number;
+}
+
+export const Option: React.FC<PropsWithChildren<OptionProps>> = ({
+  value,
+  children,
+}) => {
+  return <option value={value}>{children}</option>;
 };

package/src/components/molecules/Profile/Profile.tsx

@@ -10,6 +10,14 @@ type ProfileProps = Partial<React.ComponentProps<typeof Avatar>> & {
   children?: React.ReactNode;
 };
 
+const fontSizeVariant = {
+  s: 12,
+  m: 16,
+  l: 20,
+  xl: 24,
+  xxl: 32,
+};
+
 const getInitials = (text: string): string =>
   text
     .split(' ')
@@ -32,7 +40,7 @@ export const Profile: React.FC<ProfileProps> = ({
     )}
 
     <Details>
-      <Name as="span">{name}</Name>
+      <Name as="span" size={size}>{name}</Name>
       {children}
     </Details>
   </Root>
@@ -40,14 +48,15 @@ export const Profile: React.FC<ProfileProps> = ({
 
 const Root = styled.div`
   display: flex;
-  gap: var(--padding-m);
+  gap: var(--padding-s);
   align-items: center;
 `;
 
 Root.displayName = 'Root';
 
-const Name = styled(Hero)`
+const Name = styled(Hero)<{ size: ProfileProps['size']}>`
   font-weight: var(--font-bold);
+  font-size: ${p => fontSizeVariant[p.size || 'm']}px;
 `;
 
 Name.displayName = 'Name';

package/src/components/organisms/Select/Select.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Dropdown } from "../../molecules";
+
+interface SelectProps extends React.ComponentProps<typeof Dropdown> {
+  options: { value: string | number; label: React.ReactNode }[];
+}
+
+export const Select: React.FC<SelectProps> = ({ options, ...props }) => (
+  <Dropdown {...props}>
+    {options.map((option) => (
+      <Dropdown.Option key={option.value} value={option.value}>
+        {option.label}
+      </Dropdown.Option>
+    ))}
+  </Dropdown>
+);

package/src/components/organisms/Select/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select'

package/src/components/organisms/index.ts

@@ -1,3 +1,4 @@
 export { Menu } from './Menu';
 export { Setting } from './Setting';
-export { Modal } from './Modal'
+export { Modal } from './Modal'
+export { Select } from './Select'

package/src/index.ts

@@ -3,6 +3,7 @@ export {
   Avatar,
   Card,
   Divider,
+  DateTime,
   Icon,
   Nav,
   Pill,
@@ -25,6 +26,6 @@ export {
   Tile,
 } from "./components/molecules";
 
-export { Menu, Setting, Modal } from "./components/organisms";
+export { Menu, Setting, Modal, Select } from "./components/organisms";
 
 export { GlobalStyles as IntegrigoUI, Color } from "./styles";