From 265e00513625ae0fe968cb31c01d10d46dcd10ea Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 22 Jun 2022 14:25:21 -0400 Subject: [PATCH 1/8] style changes to favicon and imageblock --- airbyte-webapp/public/favicon.ico | Bin 1150 -> 11438 bytes .../ImageBlock/ImageBlock.module.scss | 41 +++++++++++++++ .../src/components/ImageBlock/ImageBlock.tsx | 48 +++++++----------- 3 files changed, 60 insertions(+), 29 deletions(-) create mode 100644 airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss diff --git a/airbyte-webapp/public/favicon.ico b/airbyte-webapp/public/favicon.ico index 6f3b4d65f0fe8b6b4bbd5073c3855421660ab43a..f1e01696c6d21d2f4b6bf1e98e286f3efb4fb585 100644 GIT binary patch literal 11438 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 z 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 F`X9;~S_=RG literal 1150 zcma)5TSydP6h4jPx^3;Y-IlPjpbHsNnO0XgzcEqaL;vv2neUwMod5in0hol3 zRtxxE2o@SZ2LQ_u=t9pgKbrp@E$cU~u1-waNz?Sy1v6$+S2v_)>K83Zj){rE>Jtx) zDWamHvhpQ%%+(nvPx*OkD7C+V+%T zLy;C^{UeP1`E1n`ja;LB_hH?$EaqHo%9gb8wOU*ccysZnckQO-V+Gv2h}Ath$T-`` z9D=3Th+OK-GO%PmQsXP*q{O1q&M|9AUvB)WIKSDIfSm7R*jCbaxX@D;DJqrP_v&*R zH*cefHfZ(q>*H6($vyD4lc}QJE4??c&9Q3DtRIDCy~u~Ir0>ys)}*F}Z5083VOh_H zxeIi>t$bYDYdG3W)+pByoK>x1XI0=ywxwERt0mr1nRjDHc5=v3IYc-?H^X_=YBhzr zn+Si!`mJ;1{2+TePULF+0(XW-_**j$D@W{=HTW$&I$+84IjXvXY|U#G-iKk^sqLth zKAJqc<$Pkp#~Zw2@mVRz)%W7sY5rKfjqrEI6Su~=xBM% zRf43^4e4^OY3N=~ z9D5kQYeGr$?|q7)qh}1Tb?xXI>UY*omGflVZS_(ZYr{H$JNwKwilSoi>^0=yn5&t- z_^rA8Dyfeemz?vj#h4B?T}1btt?PPKP&11z_+6K;JHaQ8U2(bpV&{13bM1@OU!7rwoA4Y5?DSJfjdm N$Oj-q0Z7vTegY`Dg#!Qp diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss new file mode 100644 index 000000000000..dc934bf3199c --- /dev/null +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss @@ -0,0 +1,41 @@ +@use "../../scss/colors"; + +.iconContainer { + height: 25px; + width: 25px; + text-align: center; + overflow: hidden; + margin-right: 6px; +} + +.circle { + height: 20px; + width: 20px; + min-width: 20px; + border-radius: 50%; + text-align: center; + margin-right: 6px; + overflow: hidden; + + &.darkBlue { + background: colors.$dark-blue-100; + } +} + +.small { + border-radius: 0%; +} + +.icon { + max-height: 100%; + max-width: 100%; +} + +.number { + font-family: "Inter"; + font-style: normal; + font-weight: 600; + font-size: 10px; + color: colors.$white; + padding: 3px 0 3px; +} diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 533e065471a4..6c6649178ae1 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -1,39 +1,29 @@ +import classnames from "classnames"; import React from "react"; -import styled from "styled-components"; import { getIcon } from "utils/imageUtils"; -interface IProps { +import styles from "./ImageCircle.module.scss"; + +interface ImageCircleProps { img?: string; - className?: string; num?: number; small?: boolean; } -export const Content = styled.div<{ small?: boolean }>` - height: 25px; - width: 25px; - min-width: 25px; - background: ${({ theme, small }) => (small ? "none" : theme.brightColor)}; - box-shadow: ${({ theme, small }) => (small ? "none" : `0 1px 2px 0 ${theme.shadowColor}`)}; - border-radius: ${({ small }) => (small ? 0 : 50)}%; - text-align: center; - - overflow: hidden; -`; - -export const Number = styled.div` - font-weight: 500; - font-size: 14px; - color: ${({ theme }) => theme.primaryColor}; - padding: 4px 0 3px; -`; - -const ImageBlock: React.FC = ({ img, className, num, small }) => ( - - {num ? {num} : <>{getIcon(img)}} - -); +const ImageCircle: React.FC = ({ img, num, small }) => { + const imageCircleClassnames = classnames({ + [styles.circle]: num, + [styles.iconContainer]: !num || num === undefined, + [styles.small]: small && !num, + [styles.darkBlue]: !small && num, + }); + return ( +
+ {num ?
{num}
:
{getIcon(img)}
} +
+ ); +}; -export default ImageBlock; -export { ImageBlock }; +export default ImageCircle; +export { ImageCircle }; From a8ee211554e95c252956aa0d5dc2ab9c1b11914d Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 22 Jun 2022 14:27:20 -0400 Subject: [PATCH 2/8] fix import --- airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 6c6649178ae1..47b2b71371e4 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -3,7 +3,7 @@ import React from "react"; import { getIcon } from "utils/imageUtils"; -import styles from "./ImageCircle.module.scss"; +import styles from "./ImageBlock.module.scss"; interface ImageCircleProps { img?: string; From 6b58352ef021ad7e90abd99568149adb57d4d797 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Wed, 22 Jun 2022 14:31:49 -0400 Subject: [PATCH 3/8] revert component and props names to block --- airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 47b2b71371e4..5cc1ae401b9d 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -5,13 +5,13 @@ import { getIcon } from "utils/imageUtils"; import styles from "./ImageBlock.module.scss"; -interface ImageCircleProps { +interface ImageBlockProps { img?: string; num?: number; small?: boolean; } -const ImageCircle: React.FC = ({ img, num, small }) => { +const ImageBlock: React.FC = ({ img, num, small }) => { const imageCircleClassnames = classnames({ [styles.circle]: num, [styles.iconContainer]: !num || num === undefined, @@ -25,5 +25,5 @@ const ImageCircle: React.FC = ({ img, num, small }) => { ); }; -export default ImageCircle; -export { ImageCircle }; +export default ImageBlock; +export { ImageBlock }; From 37802c3ed52d4645558a440f4e7a2e4485dfa8a0 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 27 Jun 2022 09:37:06 -0400 Subject: [PATCH 4/8] Update airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index 5cc1ae401b9d..d298e9e55302 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -26,4 +26,3 @@ const ImageBlock: React.FC = ({ img, num, small }) => { }; export default ImageBlock; -export { ImageBlock }; From 59e117c04f97c2389b513c568f0c95fc2a2f7454 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 27 Jun 2022 09:37:12 -0400 Subject: [PATCH 5/8] Update airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss Co-authored-by: Vladimir --- airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss index dc934bf3199c..0a2bccda7505 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss @@ -32,7 +32,7 @@ } .number { - font-family: "Inter"; + font-family: fonts.$regularFont; font-style: normal; font-weight: 600; font-size: 10px; From 129d6cd974bcf40e6d601499965dee92f24a3951 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 27 Jun 2022 09:37:18 -0400 Subject: [PATCH 6/8] Update airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx Co-authored-by: Edmundo Ruiz Ghanem <168664+edmundito@users.noreply.github.com> --- airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx index d298e9e55302..77dec16e4f0e 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.tsx @@ -11,7 +11,7 @@ interface ImageBlockProps { small?: boolean; } -const ImageBlock: React.FC = ({ img, num, small }) => { +export const ImageBlock: React.FC = ({ img, num, small }) => { const imageCircleClassnames = classnames({ [styles.circle]: num, [styles.iconContainer]: !num || num === undefined, From 9f2042ec0fc66c8e2b12bf064e055fb988b58008 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 27 Jun 2022 09:37:33 -0400 Subject: [PATCH 7/8] Update airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss Co-authored-by: Vladimir --- airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss index 0a2bccda7505..9c50ae6fa8fc 100644 --- a/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.module.scss @@ -1,4 +1,5 @@ @use "../../scss/colors"; +@use "../../scss/fonts"; .iconContainer { height: 25px; From 2e332e709a39e1aa7cbb36c61a12d11c2222ce45 Mon Sep 17 00:00:00 2001 From: Teal Larson Date: Mon, 27 Jun 2022 11:54:13 -0400 Subject: [PATCH 8/8] add storybook --- .../ImageBlock/ImageBlock.stories.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 airbyte-webapp/src/components/ImageBlock/ImageBlock.stories.tsx diff --git a/airbyte-webapp/src/components/ImageBlock/ImageBlock.stories.tsx b/airbyte-webapp/src/components/ImageBlock/ImageBlock.stories.tsx new file mode 100644 index 000000000000..bb64b45ab36d --- /dev/null +++ b/airbyte-webapp/src/components/ImageBlock/ImageBlock.stories.tsx @@ -0,0 +1,18 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import { ImageBlock } from "./ImageBlock"; + +export default { + title: "Ui/ImageBlock", + component: ImageBlock, + argTypes: {}, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const ImageBlockControl = Template.bind({}); +ImageBlockControl.args = { + img: undefined, + num: undefined, + small: undefined, +};