Merge pull request #265 from web3ui/bugfix/illustration/cudtom/sizing

feat: added story and sizing on illustration components
web3ui · Mar 10, 2022 · dfd3cac · dfd3cac
2 parents a11c924 + 1bb0bab
commit dfd3cac
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/components/Illustrations/Illustration.stories.tsx b/src/components/Illustrations/Illustration.stories.tsx
@@ -90,3 +90,10 @@ export const Bundle = Template.bind({});
 Bundle.args = {
     logo: 'bundle',
 };
+
+export const CustomSizing = Template.bind({});
+CustomSizing.args = {
+    logo: 'comingSoon',
+    width: '150px',
+    height: '150px',
+};
diff --git a/src/components/Illustrations/Illustration.tsx b/src/components/Illustrations/Illustration.tsx
@@ -58,11 +58,15 @@ const getLogo = (logo: Chain | Logo, width?: Size, height?: Size) => {
     }
 };
 
-const StyledIllustration = styled.div`
+const StyledIllustration = styled.div<
+    Pick<IllustrationProps, 'width' | 'height'>
+>`
     ${resetCSS}
     display: flex;
     justify-content: center;
     align-items: center;
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
 `;
 
 const Illustration: React.FC<IllustrationProps> = ({
@@ -72,7 +76,7 @@ const Illustration: React.FC<IllustrationProps> = ({
     height,
 }: IllustrationProps) => {
     return (
-        <StyledIllustration id={id}>
+        <StyledIllustration width={width} height={height} id={id}>
             {getLogo(logo, width, height)}
         </StyledIllustration>
     );

diff --git a/src/components/Illustrations/types.ts b/src/components/Illustrations/types.ts
@@ -31,6 +31,13 @@ export interface IllustrationProps {
      */
     logo: Chain | Logo;
 
+    /**
+     * Height of Illustration
+     */
     width?: Size;
+
+    /**
+     * Width of illustration
+     */
     height?: Size;
 }