@conduction/components 2.1.19 → 2.1.21

package/src/components/card/richContentCard/RichContentCard.module.css

@@ -1,93 +1,93 @@
-:root {
-  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  border: var(--conduction-rich-content-card-border);
-  border-radius: var(--skeleton-border-radius-md);
-
-  padding-inline-start: var(--skeleton-size-md);
-  padding-inline-end: var(--skeleton-size-md);
-  padding-block-start: var(--skeleton-size-md);
-  padding-block-end: var(--skeleton-size-md);
-}
-
-.container > *:not(.link):not(:last-child) {
-  margin-block-end: var(--skeleton-size-md);
-}
-
-.link {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.link > :first-child {
-  display: flex;
-}
-
-.labelsWithIcon {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.labelsWithIcon > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.tags > *:not(:last-child) {
-  margin-inline-end: var(--skeleton-size-md);
-}
-
-.contentLinks > *:not(:last-child):not(hr) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-/* Component: LabelWithIcon */
-.labelWithIcon {
-  display: flex;
-  align-items: center;
-  color: var(--skeleton-color-grey-3);
-}
-
-.labelWithIcon > .labelWithIcon_icon > svg {
-  height: var(--skeleton-size-sm);
-  width: var(--skeleton-size-sm);
-  margin-inline-end: var(--skeleton-size-xs);
-}
-
-.labelWithIcon > .labelWithIcon_label {
-  font-size: var(--skeleton-size-sm);
-}
-
-/* Content Link */
-.contentLink {
-  display: flex;
-  padding-block-start: var(--skeleton-size-xs);
-  padding-block-end: var(--skeleton-size-xs);
-  text-decoration: none !important;
-}
-
-.contentLink > span {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-}
-
-.contentLink:hover {
-  cursor: pointer;
-}
-
-.contentLink_content {
-  display: flex;
-  flex-direction: column;
-}
-
-.contentLink_title {
-  font-size: var(--conduction-content-link-font-size);
-}
-
-.contentLink_subTitle {
-  font-size: var(--conduction-content-link-font-size);
-  color: var(--denhaag-color-grey-3);
-}
+:root {
+  --conduction-rich-content-card-border: 1px solid var(--skeleton-color-grey-2);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  border: var(--conduction-rich-content-card-border);
+  border-radius: var(--skeleton-border-radius-md);
+
+  padding-inline-start: var(--skeleton-size-md);
+  padding-inline-end: var(--skeleton-size-md);
+  padding-block-start: var(--skeleton-size-md);
+  padding-block-end: var(--skeleton-size-md);
+}
+
+.container > *:not(.link):not(:last-child) {
+  margin-block-end: var(--skeleton-size-md);
+}
+
+.link {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.link > :first-child {
+  display: flex;
+}
+
+.labelsWithIcon {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.labelsWithIcon > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.tags > *:not(:last-child) {
+  margin-inline-end: var(--skeleton-size-md);
+}
+
+.contentLinks > *:not(:last-child):not(hr) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+/* Component: LabelWithIcon */
+.labelWithIcon {
+  display: flex;
+  align-items: center;
+  color: var(--skeleton-color-grey-3);
+}
+
+.labelWithIcon > .labelWithIcon_icon > svg {
+  height: var(--skeleton-size-sm);
+  width: var(--skeleton-size-sm);
+  margin-inline-end: var(--skeleton-size-xs);
+}
+
+.labelWithIcon > .labelWithIcon_label {
+  font-size: var(--skeleton-size-sm);
+}
+
+/* Content Link */
+.contentLink {
+  display: flex;
+  padding-block-start: var(--skeleton-size-xs);
+  padding-block-end: var(--skeleton-size-xs);
+  text-decoration: none !important;
+}
+
+.contentLink > span {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.contentLink:hover {
+  cursor: pointer;
+}
+
+.contentLink_content {
+  display: flex;
+  flex-direction: column;
+}
+
+.contentLink_title {
+  font-size: var(--conduction-content-link-font-size);
+}
+
+.contentLink_subTitle {
+  font-size: var(--conduction-content-link-font-size);
+  color: var(--denhaag-color-grey-3);
+}

package/src/components/card/richContentCard/RichContentCard.tsx

@@ -23,13 +23,13 @@ export interface RichContentCardProps {
   linkIsExternal?: boolean;
 }
 
-export const RichContentCard: React.FC<RichContentCardProps> = ({
+export const RichContentCard = ({
   link,
   labelsWithIcon,
   tags,
   contentLinks,
   linkIsExternal,
-}) => {
+}: RichContentCardProps): JSX.Element => {
   return (
     <div className={styles.container}>
       <div className={styles.link} onClick={() => navigate(link.href)}>
@@ -67,7 +67,7 @@ interface LabelWithIconProps {
   icon: JSX.Element;
 }
 
-const LabelWithIcon: React.FC<LabelWithIconProps> = ({ label, icon }) => {
+const LabelWithIcon = ({ label, icon }: LabelWithIconProps): JSX.Element => {
   return (
     <div className={styles.labelWithIcon}>
       <span className={styles.labelWithIcon_icon}>{icon}</span>
@@ -82,7 +82,7 @@ interface ContentLinkProps {
   href: string;
 }
 
-const ContentLink: React.FC<ContentLinkProps> = ({ title, subTitle, href }) => {
+const ContentLink = ({ title, subTitle, href }: ContentLinkProps): JSX.Element => {
   return (
     <Link className={styles.contentLink}>
       <div className={styles.contentLink_content}>

package/src/components/codeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
-.code {
-  margin-block: var(--skeleton-size-sm);
-  background-color: var(--skeleton-color-grey-1);
-  border-radius: var(--skeleton-size-2xs);
-  padding: var(--skeleton-size-lg);
-}
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/codeBlock/CodeBlock.tsx

@@ -5,4 +5,4 @@ interface CodeBlockProps {
   codeBlock: string | JSX.Element;
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ codeBlock }) => <div className={styles.code}>{codeBlock}</div>;
+export const CodeBlock = ({ codeBlock }: CodeBlockProps): JSX.Element => <div className={styles.code}>{codeBlock}</div>;

package/src/components/container/Container.js

@@ -1,3 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./Container.module.css";
-export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./Container.module.css";
+export const Container = ({ children }) => _jsx("div", { className: styles.container, children: children });

package/src/components/container/Container.module.css

@@ -1,9 +1,9 @@
-:root {
-  --conduction-container-max-width: 1024px;
-}
-
-.container {
-  width: 100%;
-  margin-inline: auto;
-  max-width: var(--conduction-container-max-width);
-}
+:root {
+  --conduction-container-max-width: 1024px;
+}
+
+.container {
+  width: 100%;
+  margin-inline: auto;
+  max-width: var(--conduction-container-max-width);
+}

package/src/components/container/Container.tsx

@@ -6,6 +6,6 @@ interface ContainerProps {
   layoutClassName?: string;
 }
 
-export const Container: React.FC<ContainerProps> = ({ children, layoutClassName }) => (
+export const Container = ({ children, layoutClassName }: React.PropsWithChildren<ContainerProps>): JSX.Element => (
   <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>{children}</div>
 );