@integrigo/integrigo-ui 1.6.14-f → 1.6.15

package/lib/src/components/molecules/Checkbox/Checkbox.stories.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: "s" | "m" | "l" | "xl" | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Radio/Radio.stories.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Size } from './Radio';
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
 export default _default;
-export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Basic: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const Controlled: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;
-export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+export declare const WithLabel: ComponentStory<React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     size?: Size | undefined;
     label?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>>;

package/lib/src/components/molecules/Tile/Tile.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from "react";
+export interface TileProps {
+    src: string;
+    alt: string;
+    title: string;
+    interactive?: boolean;
+}
+export declare const Tile: React.FC<PropsWithChildren<TileProps>>;

package/lib/src/components/molecules/Tile/Tile.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export default _default;
+export declare const Basic: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;
+export declare const Interactive: ComponentStory<React.FC<React.PropsWithChildren<import("./Tile").TileProps>>>;

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

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

package/lib/src/components/molecules/index.d.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/lib/src/index.d.ts

@@ -1,4 +1,4 @@
-export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from './components/atoms';
-export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, } from './components/molecules';
-export { Menu, Setting } from './components/organisms';
-export { GlobalStyles as IntegrigoUI, Color } from './styles';
+export { Alert, Avatar, Card, Divider, Icon, Nav, Pill, Typography, Spinner, Chip, Dot, } from "./components/atoms";
+export { InfoCard, Input, TextArea, Button, Checkbox, Dropdown, Profile, Radio, Tile, } from "./components/molecules";
+export { Menu, Setting } from "./components/organisms";
+export { GlobalStyles as IntegrigoUI, Color } from "./styles";

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/integrigo"
   },
-  "version": "1.6.14f",
+  "version": "1.6.15",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Tile } from "./Tile";
+
+export default {
+  title: "Molecules/Tile",
+  component: Tile,
+} as ComponentMeta<typeof Tile>;
+
+const Template: ComponentStory<typeof Tile> = (args) => <Tile {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  src: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+  alt: 'Jane Doe',
+  title: 'Tile Card'
+};
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+  src: 'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2',
+  alt: 'Jane Doe',
+  title: 'Tile Card',
+  interactive: true
+};

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

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren } from "react";
+import styled, { css } from "styled-components";
+import { Avatar, Card, Typography } from "../../atoms";
+
+const { Hero } = Typography;
+
+export interface TileProps {
+  src: string;
+  alt: string;
+  title: string;
+  interactive?: boolean;
+}
+
+export const Tile: React.FC<PropsWithChildren<TileProps>> = ({
+  src,
+  alt,
+  title,
+  interactive = false,
+  children,
+}) => {
+  return (
+    <Root size="s" flat interactive={interactive}>
+      <Info>
+        <Avatar size="xl" src={src} alt={alt} />
+        <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``;

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,7 @@ export {
   Spinner,
   Chip,
   Dot,
-} from './components/atoms';
+} from "./components/atoms";
 
 export {
   InfoCard,
@@ -21,8 +21,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";