Merge pull request #74 from miljodir/feature/displayCheckboxesInColumns

Feature/display checkboxes in columns
miljodir · Jan 17, 2024 · ef65327 · ef65327
2 parents 5bc86a6 + e9b170f
commit ef65327
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/formElements/checkboxgroup/README.md b/packages/css/src/formElements/checkboxgroup/README.md
@@ -20,7 +20,7 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
     <MdHelpText>{helpText}</MdHelpText>
   </div>
 
-  <div class="md-checkboxgroup__options [md-checkboxgroup__options--vertical]">
+  <div class="md-checkboxgroup__options [md-checkboxgroup__options--vertical] [md-checkboxgroup__options--grid]">
     <!-- Here we use the designsystem react components for checkbox, see structure for these separately -->
     <MdCheckbox />
     <MdCheckbox />

diff --git a/packages/css/src/formElements/checkboxgroup/checkboxgroup.css b/packages/css/src/formElements/checkboxgroup/checkboxgroup.css
@@ -38,6 +38,11 @@
   flex-direction: column;
 }
 
+.md-checkboxgroup .md-checkboxgroup__options--grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(max-content, 1fr));
+}
+
 .md-checkboxgroup__error {
   color: var(--mdErrorColor);
   font-size: 0.88em;

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.48",
+  "version": "1.0.49",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx
@@ -1,12 +1,11 @@
 import classnames from 'classnames';
+
 import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-
 import MdHelpButton from '../help/MdHelpButton';
 import MdHelpText from '../help/MdHelpText';
 import MdCheckbox from './MdCheckbox';
 import type { ChangeEvent } from 'react';
-
 export interface MdCheckboxGroupOptionProps {
   value: string | number;
   text?: string | number;
@@ -18,7 +17,8 @@ export interface MdCheckboxGroupProps {
   label?: string;
   id?: string | number;
   disabled?: boolean;
-  direction?: string;
+  direction?: 'horizontal' | 'vertical' | 'grid';
+  columns?: number;
   className?: string;
   error?: string;
   helpText?: string;
@@ -34,6 +34,7 @@ const MdCheckboxGroup: React.FunctionComponent<MdCheckboxGroupProps> = ({
   id,
   disabled = false,
   direction,
+  columns = 2,
   className = '',
   error,
   helpText,
@@ -55,6 +56,7 @@ const MdCheckboxGroup: React.FunctionComponent<MdCheckboxGroupProps> = ({
 
   const optionsClassNames = classnames('md-checkboxgroup__options', {
     'md-checkboxgroup__options--vertical': direction === 'vertical',
+    'md-checkboxgroup__options--grid': direction === 'grid',
   });
 
   const optionIsSelected = (option: MdCheckboxGroupOptionProps) => {
@@ -121,6 +123,7 @@ const MdCheckboxGroup: React.FunctionComponent<MdCheckboxGroupProps> = ({
         id={String(checkboxGroupId) || undefined}
         aria-describedby={helpText && helpText !== '' ? `md-checkboxgroup_help-text_${checkboxGroupId}` : undefined}
         className={optionsClassNames}
+        style={{ gridTemplateColumns: `repeat(${columns}, minmax(max-content, 1fr))` }}
       >
         {options.map(option => {
           return (

diff --git a/stories/CheckboxGroup.stories.tsx b/stories/CheckboxGroup.stories.tsx
@@ -83,7 +83,7 @@ export default {
     direction: {
       type: { name: 'string' },
       description: 'The direction for checkboxes in group.',
-      options: ['horizontal', 'vertical'],
+      options: ['horizontal', 'vertical', 'grid'],
       table: {
         defaultValue: { summary: 'horizontal' },
         type: {
@@ -124,6 +124,17 @@ export default {
       },
       action: 'Change',
     },
+    columns: {
+      type: { name: 'number' },
+      description: 'Number of columns in options grid',
+      table: {
+        defaultValue: { summary: 2 },
+        type: {
+          summary: 'number',
+        },
+      },
+      control: { type: 'number' },
+    },
   },
 };
 
@@ -182,4 +193,5 @@ CheckboxGroup.args = {
   direction: 'horizontal',
   helpText: 'This is a help text!',
   error: '',
+  columns: 3,
 };