@hyphen/hyphen-components 2.11.4 → 2.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.11.4",
+  "version": "2.12.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/FormLabel/FormLabel.module.scss

@@ -11,9 +11,4 @@
   &.disabled {
     color: var(--color-base-grey-300);
   }
-
-  .help-text {
-    margin-top: var(--INTERNAL_form-control-help-margin);
-    font-weight: var(--INTERNAL_form-control-help-font-weight);
-  }
 }

package/src/components/FormLabel/FormLabel.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react';
 import classNames from 'classnames';
 import { Box, BoxProps } from '../Box/Box';
 import styles from './FormLabel.module.scss';
+import { HelpText } from '../HelpText/HelpText';
 
 export interface FormLabelProps extends BoxProps {
   /**
@@ -80,17 +81,7 @@ export const FormLabel: FC<FormLabelProps> = ({
     >
       {children}
       {isFieldRequired && requiredIndicator && <span>{requiredIndicator}</span>}
-      {helpText && (
-        <Box
-          as="p"
-          display="block"
-          fontSize="sm"
-          color="secondary"
-          className={styles['help-text']}
-        >
-          {helpText}
-        </Box>
-      )}
+      {helpText && <HelpText>{helpText}</HelpText>}
     </Box>
   );
 };

package/src/components/HelpText/HelpText.module.scss

@@ -3,10 +3,7 @@
     --form-control-font-family,
     var(--INTERNAL_form-control-font-family)
   );
-  margin-top: var(
-    --form-control-help-margin,
-    var(--INTERNAL_form-control-help-margin)
-  );
+  margin-top: var(--size-spacing-xs);
   font-weight: var(
     --form-control-help-text-font-weight,
     var(--INTERNAL_form-control-help-text-font-weight)

package/src/components/InputValidationMessage/InputValidationMessage.tsx

@@ -20,7 +20,7 @@ export const InputValidationMessage: FC<InputValidationMessageProps> = ({
     styles['input-validation-message'],
     'font-color-danger',
     `font-size-${size}`,
-    'm-top-xs'
+    'm-top-sm'
   );
 
   return <div className={classes}>{children}</div>;

package/src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -3,7 +3,8 @@ import { ThemeProvider } from './ThemeProvider';
 import type { Meta } from '@storybook/react';
 import { Box } from '../Box/Box';
 import { RadioGroup } from '../RadioGroup/RadioGroup';
-import { useTheme, Theme } from './ThemeProvider';
+import { Theme } from './ThemeProvider';
+import { useTheme } from '../../hooks/useTheme/useTheme';
 
 const meta: Meta<typeof ThemeProvider> = {
   title: 'Providers/ThemeProvider',
@@ -15,7 +16,7 @@ export default meta;
 export const BasicUsage = () =>
   (() => {
     const App = () => {
-      const { theme, setTheme } = useTheme();
+      const { theme, setTheme, isDarkMode } = useTheme();
 
       const options = [
         {
@@ -38,7 +39,9 @@ export const BasicUsage = () =>
       return (
         <Box gap="md" background="secondary" padding="xl" color="base">
           <p>Theme: {theme}</p>
-
+          <p>
+            <code>isDarkMode</code>: {`${isDarkMode}`}
+          </p>
           <RadioGroup
             name="SelectTheme"
             value={theme}

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useEffect, useContext } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 
 export type Theme = 'dark' | 'light' | 'system';
 
@@ -11,6 +11,7 @@ type ThemeProviderProps = {
 type ThemeProviderState = {
   theme: Theme;
   setTheme: (theme: Theme) => void;
+  isDarkMode?: boolean;
 };
 
 const initialState: ThemeProviderState = {
@@ -18,7 +19,8 @@ const initialState: ThemeProviderState = {
   setTheme: () => null,
 };
 
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+export const ThemeProviderContext =
+  createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
@@ -48,12 +50,18 @@ export function ThemeProvider({
     root.classList.add(theme);
   }, [theme]);
 
+  const isDarkMode =
+    theme === 'dark' ||
+    (theme === 'system' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+
   const value = {
     theme,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
     },
+    isDarkMode,
   };
 
   return (
@@ -62,14 +70,3 @@ export function ThemeProvider({
     </ThemeProviderContext.Provider>
   );
 }
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error(
-      'useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.'
-    );
-
-  return context;
-};

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint/useBreakpoint';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
 export * from './useOpenClose/useOpenClose';
+export * from './useTheme/useTheme';
 export * from './useWindowSize/useWindowSize';
-export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';

package/src/hooks/useTheme/useTheme.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  Theme,
+  ThemeProvider,
+} from '../../components/ThemeProvider/ThemeProvider';
+import type { Meta } from '@storybook/react';
+import { Box } from '../../components/Box/Box';
+import { RadioGroup } from '../../components/RadioGroup/RadioGroup';
+import { useTheme } from '../../hooks/useTheme/useTheme';
+
+const meta: Meta<typeof ThemeProvider> = {
+  title: 'Hooks/useTheme',
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const BasicUsage = () =>
+  (() => {
+    const App = () => {
+      const { theme, setTheme, isDarkMode } = useTheme();
+
+      const options = [
+        {
+          id: 'light',
+          value: 'light',
+          label: 'Light',
+        },
+        {
+          id: 'dark',
+          value: 'dark',
+          label: 'Dark',
+        },
+        {
+          id: 'system',
+          value: 'system',
+          label: 'System',
+        },
+      ];
+
+      return (
+        <Box gap="md" background="secondary" padding="xl" color="base">
+          <p>Theme: {theme}</p>
+          <p>
+            <code>isDarkMode</code>: {`${isDarkMode}`}
+          </p>
+          <RadioGroup
+            name="SelectTheme"
+            value={theme}
+            onChange={(event) => setTheme(event.target.value as Theme)}
+            options={options}
+          />
+        </Box>
+      );
+    };
+    return (
+      <ThemeProvider defaultTheme="light" storageKey="hyphen-ui-theme">
+        <App />
+      </ThemeProvider>
+    );
+  })();

package/src/hooks/useTheme/useTheme.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ThemeProviderContext } from '../../components/ThemeProvider/ThemeProvider';
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext);
+  if (context === undefined)
+    throw new Error(
+      'useTheme must be used within a ThemeProvider. Be sure your App is wrapped in ThemeProvider.'
+    );
+  return context;
+};

package/src/styles/variables/forms.scss

@@ -2,7 +2,6 @@
   // ----GLOBALS----
   --INTERNAL_form-control-box-shadow-focus: 0 0 0 3px var(--color-border-subtle);
   --INTERNAL_form-control-label-margin: var(--size-spacing-xs);
-  --INTERNAL_form-control-help-margin: var(--size-spacing-2xs);
   --INTERNAL_form-control-line-height: var(--size-line-height-input);
   --INTERNAL_form-control-label-font-weight: var(--size-font-weight-medium);
   --INTERNAL_form-control-legend-font-weight: var(--size-font-weight-medium);