chore: move color components to separate directory

fix: issues with wrong import for components
db-ui · Jul 5, 2024 · ee9903b · ee9903b
1 parent ee4c421
commit ee9903b
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 176 deletions.
diff --git a/showcases/patternhub/components/copy-clipboard-button/index.tsx b/showcases/patternhub/components/copy-clipboard-button/index.tsx
@@ -1,5 +1,5 @@
-import { type ReactNode, useEffect, useState } from 'react';
-import { DBButton, DBTooltip } from '../src';
+import { type MouseEvent, type ReactNode, useEffect, useState } from 'react';
+import { DBButton, DBTooltip } from '../../../../output/react/src/index';
 
 export type CopyClipboardButtonProps = {
 	name: string;
@@ -14,9 +14,7 @@ const CopyClipboardButton = ({
 }: CopyClipboardButtonProps) => {
 	const [justCopied, setJustCopied] = useState<boolean>(false);
 
-	const onCopyButtonClick = async (
-		event: React.MouseEvent<HTMLButtonElement>
-	) => {
+	const onCopyButtonClick = async (event: MouseEvent<HTMLButtonElement>) => {
 		event.stopPropagation();
 
 		if (typeof navigator !== 'undefined') {

diff --git a/showcases/patternhub/components/foundations/colors/colors-grid/index.tsx b/showcases/patternhub/components/foundations/colors/colors-grid/index.tsx
@@ -0,0 +1,63 @@
+import checkerboard from '../../../../assets/images/checkerboard.png';
+import CopyClipboardButton from '../../../copy-clipboard-button';
+import { type ColorValue } from '../data';
+
+const ColorsGrid = ({
+	values,
+	prefixClass,
+	dataAttributeName,
+	showCheckerboard,
+	enableDarkMode,
+	variant
+}: {
+	values: ColorValue[];
+	prefixClass: string;
+	dataAttributeName: string;
+	showCheckerboard: boolean;
+	enableDarkMode: boolean;
+	variant: 'class' | 'dataAttribute';
+}) => {
+	const getText = (value: string) =>
+		variant === 'class'
+			? `${prefixClass}${value}`
+			: `${dataAttributeName}="${value}"`;
+
+	const getAttributes = (value: string) =>
+		variant === 'class'
+			? { className: `${prefixClass}${value}` }
+			: { [dataAttributeName]: value };
+
+	return (
+		<div
+			className="color-overview-container db-font-size-sm"
+			data-color-scheme={enableDarkMode ? 'dark' : 'light'}>
+			<span
+				style={{
+					backgroundImage: showCheckerboard
+						? `url(${checkerboard.src})`
+						: 'none'
+				}}
+			/>{' '}
+			{values.map((value, index) => {
+				const v = typeof value === 'string' ? value : value.value;
+				const appendix =
+					typeof value === 'string' ? undefined : value.appendix;
+				return (
+					<div {...getAttributes(v)}>
+						<span>
+							{getText(v)}
+							{appendix}
+						</span>
+						<CopyClipboardButton
+							name={`copy-button-${index}`}
+							copyText={getText(v)}>
+							Copied to clipboard
+						</CopyClipboardButton>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+export default ColorsGrid;
diff --git a/showcases/patternhub/components/foundations/colors/colors-overview-tabs/index.tsx b/showcases/patternhub/components/foundations/colors/colors-overview-tabs/index.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import {
+	DBSwitch,
+	DBTabItem,
+	DBTabList,
+	DBTabPanel,
+	DBTabs
+} from '../../../../../../output/react/src';
+import ColorsGrid from '../colors-grid';
+import { type ColorValue } from '../data';
+
+const ColorsOverviewTabs = ({
+	values,
+	prefixClass,
+	dataAttributeName
+}: {
+	values: ColorValue[];
+	prefixClass: string;
+	dataAttributeName: string;
+}) => {
+	const [showCheckerboard, setShowCheckerboard] = useState<boolean>(false);
+	const [enableDarkMode, setEnableDarkMode] = useState<boolean>(false);
+
+	return (
+		<>
+			<div className="color-overview-switches">
+				<DBSwitch
+					checked={showCheckerboard}
+					onChange={(event) => {
+						setShowCheckerboard(event.target.checked);
+					}}>
+					Show checkerboard
+				</DBSwitch>
+				<DBSwitch
+					checked={enableDarkMode}
+					onChange={(event) => {
+						setEnableDarkMode(event.target.checked);
+					}}>
+					Preview dark mode
+				</DBSwitch>
+			</div>
+			<DBTabs>
+				<DBTabList>
+					<DBTabItem>Classes</DBTabItem>
+					<DBTabItem>Data Attributes</DBTabItem>
+				</DBTabList>
+				<DBTabPanel>
+					<ColorsGrid
+						variant="class"
+						values={values}
+						prefixClass={prefixClass}
+						dataAttributeName={dataAttributeName}
+						showCheckerboard={showCheckerboard}
+						enableDarkMode={enableDarkMode}
+					/>
+				</DBTabPanel>
+				<DBTabPanel>
+					<ColorsGrid
+						variant="dataAttribute"
+						values={values}
+						prefixClass={prefixClass}
+						dataAttributeName={dataAttributeName}
+						showCheckerboard={showCheckerboard}
+						enableDarkMode={enableDarkMode}
+					/>
+				</DBTabPanel>
+			</DBTabs>
+		</>
+	);
+};
+
+export default ColorsOverviewTabs;
diff --git a/showcases/patternhub/components/foundations/colors/data.ts b/showcases/patternhub/components/foundations/colors/data.ts
@@ -0,0 +1,38 @@
+export const semanticColors = [
+	'neutral',
+	'brand',
+	'critical',
+	'successful',
+	'warning',
+	'informational'
+];
+
+export const additionalColors = [
+	'yellow',
+	'orange',
+	'red',
+	'pink',
+	'violet',
+	'blue',
+	'cyan',
+	'turquoise',
+	'green'
+];
+
+export const backgroundColors = [
+	'lvl-1',
+	'lvl-2',
+	'lvl-3',
+	'transparent-full',
+	'transparent-semi'
+];
+
+export const onBackgroundColors = [
+	{ value: 'default' },
+	{ value: 'weak' },
+	{ value: 'contrast' },
+	{ value: 'contrast-weak', appendix: ' *' },
+	{ value: 'border', appendix: ' *' }
+];
+
+export type ColorValue = string | { value: string; appendix?: string };
diff --git a/showcases/patternhub/pages/foundations/colors/overview.tsx b/showcases/patternhub/pages/foundations/colors/overview.tsx
@@ -1,173 +1,12 @@
-import { useState } from 'react';
 import DefaultPage from '../../../components/default-page';
+import { DBInfotext } from '../../../../../output/react/src';
+import ColorsOverviewTabs from '../../../components/foundations/colors/colors-overview-tabs';
 import {
-	DBIcon,
-	DBInfotext,
-	DBTabs,
-	DBTabList,
-	DBTabPanel,
-	DBTabItem,
-	DBSwitch
-} from '../../../../../output/react/src';
-import checkerboard from '../../../assets/images/checkerboard.png';
-import CopyClipboardButton from '../../../components/copy-clipboard-button';
-
-const semanticColors = [
-	'neutral',
-	'brand',
-	'critical',
-	'successful',
-	'warning',
-	'informational'
-];
-
-const additionalColors = [
-	'yellow',
-	'orange',
-	'red',
-	'pink',
-	'violet',
-	'blue',
-	'cyan',
-	'turquoise',
-	'green'
-];
-
-const backgroundColors = [
-	'lvl-1',
-	'lvl-2',
-	'lvl-3',
-	'transparent-full',
-	'transparent-semi'
-];
-
-const onBackgroundColors = [
-	{ value: 'default' },
-	{ value: 'weak' },
-	{ value: 'contrast' },
-	{ value: 'contrast-weak', appendix: ' *' },
-	{ value: 'border', appendix: ' *' }
-];
-
-type ColorValue = string | { value: string; appendix?: string };
-
-const ColorsGrid = ({
-	values,
-	prefixClass,
-	dataAttributeName,
-	showCheckerboard,
-	enableDarkMode,
-	variant
-}: {
-	values: ColorValue[];
-	prefixClass: string;
-	dataAttributeName: string;
-	showCheckerboard: boolean;
-	enableDarkMode: boolean;
-	variant: 'class' | 'dataAttribute';
-}) => {
-	const getText = (value: string) =>
-		variant === 'class'
-			? `${prefixClass}${value}`
-			: `${dataAttributeName}="${value}"`;
-
-	const getAttributes = (value: string) =>
-		variant === 'class'
-			? { className: `${prefixClass}${value}` }
-			: { [dataAttributeName]: value };
-
-	return (
-		<div
-			className="color-overview-container db-font-size-sm"
-			data-color-scheme={enableDarkMode ? 'dark' : 'light'}>
-			<span
-				style={{
-					backgroundImage: showCheckerboard
-						? `url(${checkerboard.src})`
-						: 'none'
-				}}
-			/>{' '}
-			{values.map((value, index) => {
-				const v = typeof value === 'string' ? value : value.value;
-				const appendix =
-					typeof value === 'string' ? undefined : value.appendix;
-				return (
-					<div {...getAttributes(v)}>
-						<span>
-							{getText(v)}
-							{appendix}
-						</span>
-						<CopyClipboardButton
-							name={`copy-button-${index}`}
-							copyText={getText(v)}>
-							Copied to clipboard
-						</CopyClipboardButton>
-					</div>
-				);
-			})}
-		</div>
-	);
-};
-
-const ColorsOverviewTabs = ({
-	values,
-	prefixClass,
-	dataAttributeName
-}: {
-	values: ColorValue[];
-	prefixClass: string;
-	dataAttributeName: string;
-}) => {
-	const [showCheckerboard, setShowCheckerboard] = useState<boolean>(false);
-	const [enableDarkMode, setEnableDarkMode] = useState<boolean>(false);
-
-	return (
-		<>
-			<div className="color-overview-switches">
-				<DBSwitch
-					checked={showCheckerboard}
-					onChange={(event) => {
-						setShowCheckerboard(event.target.checked);
-					}}>
-					Show checkerboard
-				</DBSwitch>
-				<DBSwitch
-					checked={enableDarkMode}
-					onChange={(event) => {
-						setEnableDarkMode(event.target.checked);
-					}}>
-					Preview dark mode
-				</DBSwitch>
-			</div>
-			<DBTabs>
-				<DBTabList>
-					<DBTabItem>Classes</DBTabItem>
-					<DBTabItem>Data Attributes</DBTabItem>
-				</DBTabList>
-				<DBTabPanel>
-					<ColorsGrid
-						variant="class"
-						values={values}
-						prefixClass={prefixClass}
-						dataAttributeName={dataAttributeName}
-						showCheckerboard={showCheckerboard}
-						enableDarkMode={enableDarkMode}
-					/>
-				</DBTabPanel>
-				<DBTabPanel>
-					<ColorsGrid
-						variant="dataAttribute"
-						values={values}
-						prefixClass={prefixClass}
-						dataAttributeName={dataAttributeName}
-						showCheckerboard={showCheckerboard}
-						enableDarkMode={enableDarkMode}
-					/>
-				</DBTabPanel>
-			</DBTabs>
-		</>
-	);
-};
+	additionalColors,
+	backgroundColors,
+	onBackgroundColors,
+	semanticColors
+} from '../../../components/foundations/colors/data';
 
 const ColorOverview = () => {
 	return (
@@ -242,9 +81,9 @@ const ColorOverview = () => {
 				</ul>
 				<h3>Semantic container color</h3>
 				<p>
-					These semantic colours are used to give a container a
+					These semantic colors are used to give a container a
 					corresponding meaning. <strong>Neutral</strong> stands for
-					the regular colour scheme, which is usually applied to root.
+					the regular color scheme, which is usually applied to root.
 				</p>
 				<ColorsOverviewTabs
 					values={semanticColors}

diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
@@ -197,7 +197,7 @@ div[class^="ch-"] {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid black;
+		border: 1px solid colors.$db-current-color-border;
 		padding: variables.$db-spacing-fixed-md;
 	}