@integrigo/integrigo-ui 1.6.14 → 1.6.15-b

package/src/components/molecules/Tile/Tile.tsx

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren } from "react";
+import styled, { css } from "styled-components";
+import { Avatar, Card, Gradient, Typography } from "../../atoms";
+
+const { Hero } = Typography;
+
+export interface TileProps {
+  src?: string;
+  alt?: string;
+  title: string;
+  interactive?: boolean;
+}
+
+const stringToNumber = (name: string): number =>
+  name.split("").reduce((sum, element) => sum + element.charCodeAt(0), 0);
+
+export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
+  src,
+  alt,
+  title,
+  interactive = false,
+  children,
+}) => {
+  return (
+    <Root size="s" flat interactive={interactive}>
+      <Info>
+        {src && alt ? (
+          <Avatar size="xl" src={src} alt={alt} />
+        ) : (
+          <Gradient size="xl" variant={stringToNumber(title)} circle />
+        )}
+        <Hero size="s">{title}</Hero>
+      </Info>
+
+      <Action>{children}</Action>
+    </Root>
+  );
+};
+
+const Root = styled(Card)<{ interactive: boolean }>`
+  border: 1px solid var(--shades-of-grey-40);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  ${(p) =>
+    p.interactive &&
+    css`
+      &:hover {
+        border-color: var(--color-orange);
+        cursor: pointer;
+      }
+    `}
+`;
+
+const Info = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--padding-m);
+`;
+
+const Action = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--padding-s);
+`;

package/src/components/molecules/Tile/index.ts

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

package/src/components/molecules/index.ts

@@ -6,3 +6,4 @@ export { Checkbox } from './Checkbox';
 export { Dropdown } from './Dropdown';
 export { Radio } from './Radio';
 export { Profile } from './Profile';
+export { Tile } from './Tile'

package/src/index.ts

@@ -10,7 +10,8 @@ export {
   Spinner,
   Chip,
   Dot,
-} from './components/atoms';
+  Gradient,
+} from "./components/atoms";
 
 export {
   InfoCard,
@@ -21,8 +22,9 @@ export {
   Dropdown,
   Profile,
   Radio,
-} from './components/molecules';
+  Tile,
+} from "./components/molecules";
 
-export { Menu, Setting } from './components/organisms';
+export { Menu, Setting } from "./components/organisms";
 
-export { GlobalStyles as IntegrigoUI, Color } from './styles';
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/src/styles/global.ts

@@ -30,6 +30,15 @@ export const GlobalStyles = createGlobalStyle`
     --color-orange-80: ${Color.Orange}80;
     --color-orange-65: ${Color.Orange}65;
 
+    --gradient-natural-orange: linear-gradient(333.61deg, #E09A33 13.3%, #FFB241 90.98%);
+    --gradient-orange-red: radial-gradient(106.28% 106.28% at 76.05% 89.07%, #E09A33 0%, #CF544B 100%);
+    --gradient-red: linear-gradient(326.33deg, #CF544B -3.49%, #E09A33 149.87%);
+    --gradient-red-blue: linear-gradient(326.33deg, #172142 -3.49%, #CF544B 73.19%, #E09A33 149.87%);
+    --gradient-green-blue: linear-gradient(157.85deg, #6B8B4A 19.78%, #172142 117.27%);
+    --gradient-navy: linear-gradient(147.91deg, #3F4D7B 15.54%, #172142 87.63%);
+    --gradient-cyan-blue: linear-gradient(153.72deg, #008099 -10.13%, #172142 84.37%);
+    --gradient-natural-grey: linear-gradient(152.12deg, #DBDBDB -55.19%, #5F5A5A 89.06%);
+
     --padding-s: 8px;
     --padding-m: 16px;
     --padding-l: 24px;

package/lib/src/components/atoms/Icon/icons/ChechSquare.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const CheckSquare: React.FCS;
-export default CheckSquare;