Multiple component updates. See release notes v2.2.0

michaelmcshinsky · Jan 10, 2022 · 2579124 · 2579124
1 parent 22eb9dd
commit 2579124
Show file tree

Hide file tree

Showing 25 changed files with 441 additions and 324 deletions.
diff --git a/.storybook/public/styles.css b/.storybook/public/styles.css
@@ -10984,6 +10984,11 @@ select {
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
 
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -11478,11 +11483,6 @@ select {
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
-
 .bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "slipstream-ui",
   "author": "Michael McShinsky",
   "description": "Component library combining React and Tailwindcss, built with TypeScript",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/assets/css/tailwind.output.css b/src/assets/css/tailwind.output.css
@@ -10984,6 +10984,11 @@ select {
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
 }
 
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -11478,11 +11483,6 @@ select {
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
-
 .bg-green-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(74 222 128 / var(--tw-bg-opacity));

diff --git a/src/elements/heading/Heading.tsx b/src/elements/heading/Heading.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 export interface HeadingProps {
@@ -8,24 +8,28 @@ export interface HeadingProps {
   children: ReactNode;
 }
 
-export function Heading(props: HeadingProps) {
-  const { level: Tag, custom, className, children, ...attrs } = props;
-  const classes = classNames(
-    !custom && Tag === 'h1' && 'text-3xl',
-    !custom && Tag === 'h2' && 'text-2xl',
-    !custom && Tag === 'h3' && 'text-xl',
-    !custom && Tag === 'h4' && 'text-lg',
-    !custom && Tag === 'h5' && 'text-base',
-    !custom && Tag === 'h6' && 'text-sm',
-    className,
-  );
-  return (
-    <Tag {...attrs} className={classes}>
-      {children}
-    </Tag>
-  );
-}
+export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ level: Tag, custom, className, children, ...props }, ref) => {
+    const classes = classNames(
+      'sui--heading',
+      !custom && Tag === 'h1' && 'text-3xl',
+      !custom && Tag === 'h2' && 'text-2xl',
+      !custom && Tag === 'h3' && 'text-xl',
+      !custom && Tag === 'h4' && 'text-lg',
+      !custom && Tag === 'h5' && 'text-base',
+      !custom && Tag === 'h6' && 'text-sm',
+      className
+    );
+
+    return (
+      <Tag ref={ref} className={classes} {...props}>
+        {children}
+      </Tag>
+    );
+  }
+);
 
+Heading.displayName = 'Heading';
 Heading.defaultProps = {
   level: 'h2',
   custom: false,

diff --git a/src/elements/text/Text.tsx b/src/elements/text/Text.tsx
@@ -1,9 +1,23 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
+import classNames from 'classnames';
 
 export interface TextProps {
   children: ReactNode;
+  className?: string;
 }
 
-export function Text({ children, ...props }: TextProps) {
-  return <p {...props}>{children}</p>;
-}
+export const Text = forwardRef<HTMLParagraphElement, TextProps>(
+  ({ children, className, ...props }, ref) => {
+    const classes = classNames('sui--text', className);
+
+    return (
+      <p ref={ref} className={classes} {...props}>
+        {children}
+      </p>
+    );
+  }
+);
+
+Text.displayName = 'Text';
+
+export default Text;
diff --git a/src/forms/field-set/FieldSet.tsx b/src/forms/field-set/FieldSet.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 export interface FieldSetProps {
@@ -8,32 +8,29 @@ export interface FieldSetProps {
   custom?: boolean;
 }
 
-export function FieldSet({
-  className,
-  styles,
-  children,
-  custom,
-}: FieldSetProps) {
-  const classes = classNames(
-    'sui--fieldset',
-    !custom && 'block py-2 px-3 border border-solid border-gray-300',
-    className,
-  );
+export const FieldSet = forwardRef<HTMLFieldSetElement, FieldSetProps>(
+  ({ className, styles, children, custom, ...props }, ref) => {
+    const classes = classNames(
+      'sui--fieldset',
+      !custom && 'block py-2 px-3 border border-solid border-gray-300',
+      className
+    );
 
-  const fieldsetStyles = !custom
-    ? {
-        marginInlineStart: '2px',
-        marginInlineEnd: '2px',
-        ...styles,
-      }
-    : { ...styles };
+    const fieldsetStyles = !custom
+      ? {
+          marginInlineStart: '2px',
+          marginInlineEnd: '2px',
+          ...styles,
+        }
+      : { ...styles };
 
-  return (
-    <fieldset style={fieldsetStyles} className={classes}>
-      {children}
-    </fieldset>
-  );
-}
+    return (
+      <fieldset ref={ref} style={fieldsetStyles} className={classes} {...props}>
+        {children}
+      </fieldset>
+    );
+  }
+);
 
 FieldSet.displayName = 'FieldSet';
 

diff --git a/src/forms/field-set/FieldSetLegend.tsx b/src/forms/field-set/FieldSetLegend.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import classNames from 'classnames';
 
 export interface FieldSetLegendProps {
@@ -7,18 +7,22 @@ export interface FieldSetLegendProps {
   custom?: boolean;
 }
 
-export function FieldSetLegend({
-  className,
-  children,
-  custom,
-}: FieldSetLegendProps) {
+export const FieldSetLegend = forwardRef<
+  HTMLLegendElement,
+  FieldSetLegendProps
+>(({ className, children, custom, ...props }, ref) => {
   const classes = classNames(
     'sui--fieldset-legend',
     !custom && 'block px-1 text-sm -mx-0.5',
-    className,
+    className
   );
-  return <legend className={classes}>{children}</legend>;
-}
+
+  return (
+    <legend ref={ref} className={classes} {...props}>
+      {children}
+    </legend>
+  );
+});
 
 FieldSetLegend.displayName = 'FieldSetLegend';
 

diff --git a/src/forms/form-feedback/FormFeedback.tsx b/src/forms/form-feedback/FormFeedback.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { forwardRef, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 export interface FormFeedbackProps extends HTMLAttributes<HTMLDivElement> {
@@ -7,21 +7,21 @@ export interface FormFeedbackProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
-export function FormFeedback(props: FormFeedbackProps) {
-  const { className, valid, children, ...attrs } = props;
+export const FormFeedback = forwardRef<HTMLDivElement, FormFeedbackProps>(
+  ({ className, valid, children, ...props }, ref) => {
+    const classes = classNames(
+      'sui--form-feedback text-sm',
+      valid ? 'text-green-500' : 'text-red-500',
+      className
+    );
 
-  const classes = classNames(
-    'sui--form-feedback text-sm',
-    valid ? 'text-green-500' : 'text-red-500',
-    className,
-  );
-
-  return (
-    <div className={classes} {...attrs}>
-      {children}
-    </div>
-  );
-}
+    return (
+      <div ref={ref} className={classes} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
 
 FormFeedback.displayName = 'FormFeedback';