Adapt section components to new design

* adapt sections to new design
* adapt section filters and search to new design
* remove the section filter dialog component and add it as an example
* move the section filter component into the section/header
* add row and group components for section header
* add section-header-spacer component
* make id only required for form fields if label is set
* remove section-action component, use button components instead

.eslintignore

@@ -35,8 +35,6 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
-sectionFilter.js
-sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js

.gitignore

@@ -66,8 +66,6 @@ pagination.js
 pagination.d.ts
 section.js
 section.d.ts
-sectionFilter.js
-sectionFilter.d.ts
 selectDialog.js
 selectDialog.d.ts
 submitButton.js

package.json

@@ -123,8 +123,6 @@
     "pagination.d.ts",
     "section.js",
     "section.d.ts",
-    "sectionFilter.js",
-    "sectionFilter.d.ts",
     "selectDialog.js",
     "selectDialog.d.ts",
     "submitButton.js",

src/components/action/theme.ts

@@ -1,6 +1,6 @@
 export default {
   action: {
-    base: 'flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 mx-4 lg:mx-0',
+    base: 'flex flex-col lg:flex-row gap-4',
     variant: {
       start: 'lg:justify-start',
       center: 'lg:justify-center',

src/components/button/index.ts

@@ -1,4 +1,6 @@
+export * from './types'
 export * from './Button'
 export * from './ButtonLink'
 export * from './ButtonIcon'
 export * from './ButtonIconLink'
+export * from './SubmitButton'

src/components/dialog/DialogSectionContainer.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { ReactElement } from 'react'
+import { useTheme } from '../../framework'
+import { ClassNameProps } from '../types'
+
+type Props = {
+  children?: ReactElement
+} & ClassNameProps
+
+export function DialogSectionContainer({
+  className,
+  children,
+}: Props): ReactElement {
+  const { dialog } = useTheme()
+  return (
+    <div className={classNames(dialog.sectionContainer.base, className)}>
+      {children}
+    </div>
+  )
+}

src/components/dialog/index.ts

@@ -1,2 +1,3 @@
 export * from './confirmation/ConfirmationDialog'
 export * from './DialogHeader'
+export * from './DialogSectionContainer'

src/components/dialog/select/SelectDialog.stories.mdx

@@ -4,6 +4,7 @@ import { Button } from '../../button/Button'
 import { Tone } from '../../types'
 import { NavigationProvider } from '../../navigation/NavigationContext'
 import { SectionContentList, SectionListItem } from '../../section'
+import { DialogSectionContainer } from '../DialogSectionContainer'
 import { SelectDialog } from './SelectDialog'
 
 <Meta title="Components/Dialog/SelectDialog" component={SelectDialog} />
@@ -38,13 +39,17 @@ export const Template = ({
           onDismiss={() => setToggle(!toggle)}
           dialogLabel={dialogLabel}
         >
-          <SectionContentList>
-            {userList
-              .filter((user) => user.toLowerCase().includes(text.toLowerCase()))
-              .map((user, index) => (
-                <SectionListItem key={index}>{user}</SectionListItem>
-              ))}
-          </SectionContentList>
+          <DialogSectionContainer>
+            <SectionContentList>
+              {userList
+                .filter((user) =>
+                  user.toLowerCase().includes(text.toLowerCase())
+                )
+                .map((user, index) => (
+                  <SectionListItem key={index}>{user}</SectionListItem>
+                ))}
+            </SectionContentList>
+          </DialogSectionContainer>
         </SelectDialog>
       ) : (
         <Button tone={buttonTone} onClick={() => setToggle(!toggle)}>

src/components/dialog/theme.ts

@@ -15,4 +15,7 @@ export default {
   header: {
     base: 'p-0 lg:p-4 bg-gray-300 border-b border-gray-600',
   },
+  sectionContainer: {
+    base: 'bg-white rounded-lg rounded-t-none',
+  },
 }

src/components/form/Input.tsx

@@ -10,20 +10,29 @@ import { InputLabel } from './InputLabel'
 import { Variant, VariantProps } from './types'
 import { useCustomInputCss } from './useCustomInputCss'
 
-type Props = React.DetailedHTMLProps<
+type InputPropsBase = React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 > &
   ModeProps &
   VariantProps & {
-    id: string
-    label?: string
     name: string
     iconStart?: ComponentType<IconProps>
     iconEnd?: ComponentType<IconProps>
   }
 
-export const Input = forwardRef<HTMLInputElement, Props>(
+type InputPropsWithoutLabel = InputPropsBase & {
+  label?: never
+}
+
+type InputPropsWithLabel = InputPropsBase & {
+  id: string
+  label: string
+}
+
+export type InputProps = InputPropsWithoutLabel | InputPropsWithLabel
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       label,
@@ -47,11 +56,13 @@ export const Input = forwardRef<HTMLInputElement, Props>(
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
         <div className={form.input.field}>
           {iconStart && (
             <InputIcon

src/components/form/Select.tsx

@@ -1,23 +1,34 @@
+import classNames from 'classnames'
 import { useField } from 'formik'
 
 import React, { forwardRef } from 'react'
+import { useTheme } from '../../framework'
 import { Mode, ModeProps } from '../types'
 import { InputError } from './InputError'
 import { InputLabel } from './InputLabel'
 import { Variant, VariantProps } from './types'
 import { useCustomInputCss } from './useCustomInputCss'
 
-type SelectProps = React.DetailedHTMLProps<
+type SelectPropsBase = React.DetailedHTMLProps<
   React.SelectHTMLAttributes<HTMLSelectElement>,
   HTMLSelectElement
 > &
   ModeProps &
   VariantProps & {
-    id: string
-    label?: string
     name: string
   }
 
+type SelectPropsWithoutLabel = SelectPropsBase & {
+  label?: never
+}
+
+type SelectPropsWithLabel = SelectPropsBase & {
+  id: string
+  label: string
+}
+
+export type SelectProps = SelectPropsWithoutLabel | SelectPropsWithLabel
+
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (
     {
@@ -37,15 +48,23 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       variant
     )
     const [field] = useField(props.name)
+    const { form } = useTheme()
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
-        <select {...field} {...props} ref={ref} className={customCss.inputCss}>
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
+        <select
+          {...field}
+          {...props}
+          ref={ref}
+          className={classNames(form.select.base, customCss.inputCss)}
+        >
           {children}
         </select>
         <InputError name={props.name} className={customCss.errorCss} />

src/components/form/SelectMonth.tsx

@@ -1,20 +1,10 @@
-import React, { forwardRef } from 'react'
-import { ClassNameProps, Mode, ModeProps } from '../types'
+import { forwardRef } from 'react'
+import { Mode } from '../types'
 import { useInternationalization } from '../../framework'
-import { Select } from './Select'
+import { Select, SelectProps } from './Select'
 import { Option } from './Option'
 
-type SelectMonthProps = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  HTMLSelectElement
-> &
-  ClassNameProps &
-  ModeProps & {
-    id: string
-    name: string
-    label?: string
-    className?: string
-  }
+type SelectMonthProps = SelectProps
 
 export enum Month {
   JANUARY = 'JANUARY',

src/components/form/SelectYear.tsx

@@ -1,16 +1,10 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 import { Mode, ModeProps } from '../types'
-import { Select } from './Select'
+import { Select, SelectProps } from './Select'
 import { Option } from './Option'
 
-type Props = React.DetailedHTMLProps<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  HTMLSelectElement
-> &
+type Props = SelectProps &
   ModeProps & {
-    id: string
-    label?: string
-    name: string
     from: number
     to: number
   }

src/components/form/TextArea.tsx

@@ -6,14 +6,25 @@ import { InputLabel } from './InputLabel'
 import { useCustomInputCss } from './useCustomInputCss'
 import { Variant, VariantProps } from './types'
 
-type Props = React.DetailedHTMLProps<
+type TextAreaPropsBase = React.DetailedHTMLProps<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 > &
   ModeProps &
-  VariantProps & { id: string; label?: string; name: string }
+  VariantProps & { name: string }
 
-export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
+type TextAreaPropsWithoutLabel = TextAreaPropsBase & {
+  label?: never
+}
+
+type TextAreaPropsWithLabel = TextAreaPropsBase & {
+  id: string
+  label: string
+}
+
+export type TextAreaProps = TextAreaPropsWithoutLabel | TextAreaPropsWithLabel
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     { label, mode = Mode.light, variant = Variant.ghost, className, ...props },
     ref
@@ -28,11 +39,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, Props>(
 
     return (
       <div className={className}>
-        <InputLabel
-          inputId={props.id}
-          label={label}
-          className={customCss.labelCss}
-        />
+        {label && props.id && (
+          <InputLabel
+            inputId={props.id}
+            label={label}
+            className={customCss.labelCss}
+          />
+        )}
         <textarea
           {...field}
           {...props}

src/components/form/async/SelectItem.stories.mdx

@@ -3,7 +3,6 @@ import { action } from '@storybook/addon-actions'
 import { Formik } from 'formik'
 import * as Yup from 'yup'
 import { IndexType } from '@aboutbits/pagination'
-import { SectionContent } from '../../section'
 import { Form } from '../Form'
 import { SelectItem } from './SelectItem'
 import {
@@ -28,9 +27,7 @@ import {
           onSubmit={(values) => action('onSubmit')(values)}
         >
           <Form>
-            <SectionContent>
-              <Story />
-            </SectionContent>
+            <Story />
           </Form>
         </Formik>
       )