Content and form page style refactor with utrecht components

.github/workflows/continuous-deployment.yml

@@ -25,14 +25,14 @@ jobs:
           npm ci
           npm ls
 
-      - name: "Continuous Integration: lint"
-        run: |
-          npm run lint --if-present
-
       - name: "Continuous Integration: build"
         run: |
           npm run build --if-present
 
+      - name: "Continuous Integration: lint"
+        run: |
+          npm run lint --if-present
+
       - name: "Continuous Integration: test"
         run: |
           npm run test --if-present

components/alert/css/alert.examples.stories.mdx

@@ -1,5 +1,6 @@
 import frameworkDecorator from "@nl-rvo/storybook/frameworkDecorator";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Button } from "../../button/css/template";
 import { AllAlertKinds, argTypes, defaultArgs } from "./template";
 import "./index.scss";
 
@@ -29,8 +30,14 @@ import "./index.scss";
     name="With button"
     args={{
       defaultArgs,
-      content:
-        '<div class="rvo-layout-column rvo-layout-gap--md"><div>This is an example of an alert with button</div><button class="utrecht-button utrecht-button--primary-action rvo-button--sm">Button</button></div>',
+      content: (
+        <div className="rvo-layout-column rvo-layout-gap--md">
+          <div>This is an example of an alert with button</div>
+          <Button kind="primary" size="sm">
+            Button
+          </Button>
+        </div>
+      ),
     }}
   >
     {AllAlertKinds.bind({})}

components/alert/css/template.tsx

@@ -2,10 +2,10 @@
  * @license EUPL-1.2
  * Copyright (c) 2022 Community for NL Design System
  */
-import '@utrecht/component-library-css';
 import clsx from 'clsx';
 import React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
+import { Icon } from '../../icon/css/template';
 import { Link } from '../../link/css/template';
 import { StatusIcon } from '../../status-icon/css/template';
 import validateHTML from '../../utils/validateHTML';
@@ -79,7 +79,7 @@ export const Alert: React.FC<IAlertProps> = ({
       </div>
       {closable && (
         <button className="utrecht-button rvo-button--close">
-          <div className="rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--zwart"></div>
+          <Icon color="zwart" icon="kruis" size="md" />
         </button>
       )}
     </div>

components/breadcrumbs/css/template.tsx

@@ -4,6 +4,7 @@
  */
 import clsx from 'clsx';
 import React from 'react';
+import { Icon } from '../../icon/css/template';
 
 interface IBreadcrumbItem {
   label: string;
@@ -44,7 +45,7 @@ export const Breadcrumbs: React.FC<IBreadcrumbProps> = ({ items = defaultArgs.it
       {items.map((item, index) => {
         // Parse divider markup
         let dividerMarkup = index > 0 && index < items.length && (
-          <div className={clsx('rvo-icon', 'rvo-icon-delta-naar-rechts', `rvo-icon--xs`, 'rvo-icon--hemelblauw')}></div>
+          <Icon color="hemelblauw" icon="delta-naar-rechts" size="xs" />
         );
 
         // Parse item markup

components/button-group/css/template.tsx

@@ -2,14 +2,12 @@
  * @license EUPL-1.2
  * Copyright (c) 2022 Community for NL Design System
  */
-import '@utrecht/component-library-css';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Button, IButtonProps } from '../../button/css/template';
 
 interface IButtonGroupProps {
   buttonsLeft: IButtonProps[];
   buttonsRight: IButtonProps[];
-  children?: React.ReactNode;
 }
 
 const defaultButtonsLeft = [
@@ -48,7 +46,7 @@ export const defaultArgs: IButtonGroupProps = {
   buttonsRight: defaultButtonsRight,
 };
 
-export const ButtonGroup: React.FC<IButtonGroupProps> = ({
+export const ButtonGroup: React.FC<PropsWithChildren<IButtonGroupProps>> = ({
   buttonsLeft = defaultArgs.buttonsLeft,
   buttonsRight = defaultArgs.buttonsRight,
   children,

components/button/css/button.kinds.stories.mdx

@@ -1,6 +1,6 @@
 import frameworkDecorator from "@nl-rvo/storybook/frameworkDecorator";
 import { Canvas, Meta, Story } from "@storybook/addon-docs";
-import { argTypes, Button } from "./template";
+import { argTypes, Button, exampleArgs } from "./template";
 import "./index.scss";
 
 <Meta
@@ -19,12 +19,7 @@ import "./index.scss";
 ## Primary
 
 <Canvas>
-  <Story
-    name="Primary"
-    args={{
-      kind: "primary",
-    }}
-  >
+  <Story name="Primary" args={{ ...exampleArgs, kind: "primary" }}>
     {Button.bind({})}
   </Story>
 </Canvas>
@@ -35,6 +30,7 @@ import "./index.scss";
   <Story
     name="Secondary"
     args={{
+      ...exampleArgs,
       kind: "secondary",
     }}
   >
@@ -48,6 +44,7 @@ import "./index.scss";
   <Story
     name="Tertiary"
     args={{
+      ...exampleArgs,
       kind: "tertiary",
     }}
   >
@@ -61,6 +58,7 @@ import "./index.scss";
   <Story
     name="Quaternary"
     args={{
+      ...exampleArgs,
       kind: "quaternary",
     }}
   >
@@ -74,6 +72,7 @@ import "./index.scss";
   <Story
     name="Warning subtle"
     args={{
+      ...exampleArgs,
       kind: "warning-subtle",
     }}
   >
@@ -87,6 +86,7 @@ import "./index.scss";
   <Story
     name="Warning"
     args={{
+      ...exampleArgs,
       kind: "warning",
     }}
   >

components/button/css/button.sizes.stories.mdx

@@ -16,14 +16,28 @@ import "./index.scss";
 
 # Button sizes
 
+### Extra small
+
+<Canvas>
+  <Story
+    name="Extra small"
+    args={{
+      kind: "primary",
+      size: "xs",
+    }}
+  >
+    {AllButtonKinds.bind({})}
+  </Story>
+</Canvas>
+
 ### Small
 
 <Canvas>
   <Story
     name="Small"
     args={{
       kind: "primary",
-      size: "small",
+      size: "sm",
     }}
   >
     {AllButtonKinds.bind({})}

components/button/css/button.stories.mdx

@@ -1,6 +1,6 @@
 import frameworkDecorator from "@nl-rvo/storybook/frameworkDecorator";
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
-import { argTypes, Button, defaultArgs } from "./template";
+import { argTypes, Button, exampleArgs } from "./template";
 import "./index.scss";
 
 <Meta
@@ -17,7 +17,7 @@ import "./index.scss";
 # Button
 
 <Canvas>
-  <Story name="Button" args={defaultArgs}>
+  <Story name="Button" args={exampleArgs}>
     {Button.bind({})}
   </Story>
 </Canvas>