improve blocks to add classes

reaviz · Dec 1, 2023 · ffe43ed · ffe43ed
1 parent 5204593
commit ffe43ed
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/utils/Theme/helpers/ColorBlocks.tsx b/src/utils/Theme/helpers/ColorBlocks.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import { useTheme } from '../ThemeContext';
 import chroma from 'chroma-js';
 
-export const ColorBlock = ({ name, color }) => (
+export const ColorBlock = ({ name, color, className }) => (
   <div
     key={name}
     style={{
       border: 'solid 1px var(--slate-500)',
       borderRadius: 'var(--border-radius-md)',
       overflow: 'hidden'
     }}
+    className={className}
   >
     <div
       style={{
@@ -47,7 +48,12 @@ export const ColorBlock = ({ name, color }) => (
   </div>
 );
 
-export const ColorPaletteBlock = ({ name, color, showName = true }) => {
+export const ColorPaletteBlock = ({
+  name,
+  color,
+  className,
+  showName = true
+}) => {
   const valid = chroma.valid(color);
   const fontColor =
     valid && !name.includes('overlay')
@@ -59,6 +65,7 @@ export const ColorPaletteBlock = ({ name, color, showName = true }) => {
   return (
     <div
       key={name}
+      className={className}
       style={{
         borderRight: 'solid 1px var(--slate-500)'
       }}
@@ -67,7 +74,8 @@ export const ColorPaletteBlock = ({ name, color, showName = true }) => {
         style={{
           padding: 'var(--spacing-md)',
           background: color,
-          height: '100%'
+          height: '100%',
+          minHeight: 50
         }}
       >
         {showName && (
@@ -98,10 +106,12 @@ export const ColorPaletteBlock = ({ name, color, showName = true }) => {
 export const ColorPaletteBlocks = ({
   name,
   colors,
+  className,
   token = null,
   showNames = true
 }) => (
   <div
+    className={className}
     style={{
       marginBottom: 'var(--spacing-xl)'
     }}

diff --git a/src/utils/Theme/helpers/IconBlocks.tsx b/src/utils/Theme/helpers/IconBlocks.tsx
@@ -4,14 +4,17 @@ export interface IconBlockProps {
   name: string;
   component?: any;
   src?: any;
+  className?: string;
 }
 
 export const IconBlock: FC<IconBlockProps> = ({
   name,
   src,
+  className,
   component: Component
 }) => (
   <div
+    className={className}
     style={{
       display: 'flex',
       flexDirection: 'column',
@@ -45,16 +48,18 @@ export const IconBlock: FC<IconBlockProps> = ({
 
 export interface IconBlocksProps {
   icons: IconBlockProps[];
+  className?: string;
 }
 
-export const IconBlocks: FC<IconBlocksProps> = ({ icons }) => (
+export const IconBlocks: FC<IconBlocksProps> = ({ icons, className }) => (
   <div
     style={{
       display: 'grid',
       gridGap: 'var(--spacing-lg)',
       gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
       justifyItems: 'stretch'
     }}
+    className={className}
   >
     {icons.map(key => (
       <IconBlock key={key.name} {...key} />

diff --git a/src/utils/Theme/helpers/TypographyBlocks.tsx b/src/utils/Theme/helpers/TypographyBlocks.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { useTheme } from '../ThemeContext';
 import { camelToDash } from '../utils';
 
-export const TypographyLetterBlock = ({ fontFamily }) => (
+export const TypographyLetterBlock = ({ fontFamily, className }) => (
   <div
+    className={className}
     style={{
       fontFamily,
       display: 'flex',
@@ -28,8 +29,8 @@ export const TypographyLetterBlock = ({ fontFamily }) => (
   </div>
 );
 
-export const TypographySizeBlock = ({ sizes }) => (
-  <div>
+export const TypographySizeBlock = ({ sizes, className }) => (
+  <div className={className}>
     {Object.keys(sizes).map(size => (
       <div
         key={size}
@@ -74,8 +75,9 @@ export const TypographySizeBlock = ({ sizes }) => (
   </div>
 );
 
-export const TypographyWeightBlock = ({ weights }) => (
+export const TypographyWeightBlock = ({ weights, className }) => (
   <div
+    className={className}
     style={{
       padding: 'var(--spacing-md)',
       borderRadius: 'var(--border-radius-md)',