Feature/paragraph (#544)

closes #475 --------- Co-authored-by: Ruben Smit <[email protected]>
nl-design-system · Aug 16, 2024 · 3bcf8fa · 3bcf8fa
1 parent 4581442
commit 3bcf8fa
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 87 deletions.
diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionProvider } from '@rijkshuisstijl-community/components-react';
+import { AccordionProvider, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { Avatar, Pagination } from '@amsterdam/design-system-react';
 import {
   IconAlertTriangle,
@@ -33,7 +33,6 @@ import {
   LinkListLink,
   OrderedList,
   OrderedListItem,
-  Paragraph,
   RadioButton,
   Separator,
   StatusBadge,
@@ -75,18 +74,14 @@ export default function Collage() {
           src="https://raw.githubusercontent.com/nl-design-system/rijkshuisstijl-community/0bfd32af3f34ff7ce62f4769fbec8895720dde75/proprietary/assets/src/placeholder.jpg"
         ></Image>
       </div>
-      <div className="unstarted">
-        <Paragraph lead>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
-        </Paragraph>
-      </div>
-      <div className="unstarted">
-        <Paragraph>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de
-          hele Nederlandse overheid samenwerken aan een begrijpelijke, gebruiksvriendelijke én toegankelijke online
-          dienstverlening.
-        </Paragraph>
-      </div>
+      <Paragraph lead>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
+      </Paragraph>
+      <Paragraph>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de hele
+        Nederlandse overheid samenwerken aan een begrijpelijke, gebruiksvriendelijke én toegankelijke online
+        dienstverlening.
+      </Paragraph>
       <div className="unstarted">
         <OrderedList>
           <OrderedListItem>Verkies makkelijke korte boven formele lange woorden.</OrderedListItem>
@@ -115,11 +110,9 @@ export default function Collage() {
           <UnorderedListItem>Maak gebruik van opsommingstekens waar dat mogelijk is.</UnorderedListItem>
         </UnorderedList>
       </div>
-      <div className="unstarted">
-        <Paragraph lead>
-          In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
-        </Paragraph>
-      </div>
+      <Paragraph lead>
+        In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen.
+      </Paragraph>
       <div className="unstarted">
         <Blockquote attribution="Pippi Langkous">Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan</Blockquote>
       </div>

diff --git a/apps/rhc-templates/src/app/details/page.tsx b/apps/rhc-templates/src/app/details/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo } from '@rijkshuisstijl-community/components-react';
+import { Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import {
   BreadcrumbNav,
   BreadcrumbNavLink,
@@ -13,7 +13,6 @@ import {
   PageContent,
   PageFooter,
   PageHeader,
-  Paragraph,
   Separator,
 } from '@utrecht/component-library-react/dist/css-module';
 
@@ -54,13 +53,11 @@ export default function Details() {
       </div>
 
       <PageContent className="container page-content">
-        <div className="unstarted">
-          <Paragraph>
-            De Arbeidstijdenwet geeft regels voor werktijden, pauzes en rusttijden van werknemers. Met deze regels wil
-            de Rijksoverheid werknemers beschermen tegen te lange werkdagen. Maar ook de combinatie van werk, privé en
-            zorgtaken gemakkelijker maken.
-          </Paragraph>
-        </div>
+        <Paragraph>
+          De Arbeidstijdenwet geeft regels voor werktijden, pauzes en rusttijden van werknemers. Met deze regels wil de
+          Rijksoverheid werknemers beschermen tegen te lange werkdagen. Maar ook de combinatie van werk, privé en
+          zorgtaken gemakkelijker maken.
+        </Paragraph>
         <div className="unstarted">
           <Separator></Separator>
         </div>

diff --git a/apps/rhc-templates/src/app/form/page.tsx b/apps/rhc-templates/src/app/form/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionProvider, Logo } from '@rijkshuisstijl-community/components-react';
+import { AccordionProvider, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { FormLabel, Heading } from '@utrecht/component-library-react';
 import {
   BreadcrumbNav,
@@ -16,7 +16,6 @@ import {
   PageContent,
   PageFooter,
   PageHeader,
-  Paragraph,
   RadioButton,
   Textarea,
   Textbox,
@@ -50,12 +49,10 @@ export default function Form() {
         <div className="unstarted">
           <Heading level={1}>Formulier voor vragen over Sisa</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Heeft u vragen over Single information, Single audit (SiSa)?</Paragraph>
-          <Paragraph>Gebruik dan het formulier hieronder.</Paragraph>
-          <br />
-          <Paragraph>Mogelijke vragen:</Paragraph>
-        </div>
+        <Paragraph>Heeft u vragen over Single information, Single audit (SiSa)?</Paragraph>
+        <Paragraph>Gebruik dan het formulier hieronder.</Paragraph>
+        <br />
+        <Paragraph>Mogelijke vragen:</Paragraph>
         <div className="unstarted">
           <UnorderedList>
             <UnorderedListItem>Hoe moet ik extra regels toevoegen bij de macro-versie?</UnorderedListItem>
@@ -70,15 +67,13 @@ export default function Form() {
           </UnorderedList>
         </div>
         <br />
-        <div className="unstarted">
-          <Paragraph>
-            Lees verder over de{' '}
-            <span className="unstarted">
-              <Link href="#">verantwoordingsmethode SiSa</Link>
-            </span>
-            .
-          </Paragraph>
-        </div>
+        <Paragraph>
+          Lees verder over de{' '}
+          <span className="unstarted">
+            <Link href="#">verantwoordingsmethode SiSa</Link>
+          </span>
+          .
+        </Paragraph>
         <form>
           <div className="unstarted">
             <FormField label="Naam">
@@ -162,13 +157,11 @@ export default function Form() {
           <div className="unstarted">
             <Heading level={1}>Informatie over de verwerking van uw persoonsgegevens</Heading>
           </div>
-          <div className="unstarted">
-            <Paragraph>
-              Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in de
-              archiefwet tijdelijk bewaard in de daarvoor bestemde archiefsystemen. Deze zijn van het Ministerie van
-              Binnenlandse Zaken & Koninkrijksrelaties (BZK).
-            </Paragraph>
-          </div>
+          <Paragraph>
+            Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in de
+            archiefwet tijdelijk bewaard in de daarvoor bestemde archiefsystemen. Deze zijn van het Ministerie van
+            Binnenlandse Zaken & Koninkrijksrelaties (BZK).
+          </Paragraph>
           <AccordionProvider
             sections={[
               {

diff --git a/apps/rhc-templates/src/app/page/page.tsx b/apps/rhc-templates/src/app/page/page.tsx
@@ -27,12 +27,11 @@ import {
   NavBar,
   NavList,
   NavListLinkButton,
-  Paragraph,
   Image,
   Figure,
   FigureCaption,
 } from '@utrecht/component-library-react/dist/css-module';
-import { ActionGroup, Logo } from '@rijkshuisstijl-community/components-react';
+import { ActionGroup, Logo, Paragraph } from '@rijkshuisstijl-community/components-react';
 import { HeadingGroup } from '@utrecht/component-library-react';
 
 export default function Page() {
@@ -83,32 +82,24 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={2}>Dit is een H2</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming ordered list</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
+        <Paragraph>Opsomming ordered list</Paragraph>
         <div className="unstarted">
           <OrderedList>
             <OrderedListItem>Ordered list item.</OrderedListItem>
             <OrderedListItem>Ordered list item.</OrderedListItem>
             <OrderedListItem>Ordered list item.</OrderedListItem>
           </OrderedList>
         </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming unordered list</Paragraph>
-        </div>
+        <Paragraph>Opsomming unordered list</Paragraph>
         <div className="unstarted">
           <UnorderedList>
             <UnorderedListItem>Unordered list item.</UnorderedListItem>
             <UnorderedListItem>Unordered list item.</UnorderedListItem>
             <UnorderedListItem>Unordered list item.</UnorderedListItem>
           </UnorderedList>
         </div>
-        <div className="unstarted">
-          <Paragraph>Opsomming link list</Paragraph>
-        </div>
+        <Paragraph>Opsomming link list</Paragraph>
         <div className="unstarted">
           <LinkList
             icon={() => (
@@ -130,9 +121,7 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={3}>Dit is een H3</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
         <div className="unstarted">
           <Link external={true} href="example.com">
             Dit is een externe link
@@ -167,18 +156,16 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={4}>Dit is een H4</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>
-            Dit is een wat langere paragraaf. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-            <span className="unstarted">
-              <Link href="/">Dit is een normale link</Link>
-            </span>
-          </Paragraph>
-        </div>
+        <Paragraph>
+          Dit is een wat langere paragraaf. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+          officia deserunt mollit anim id est laborum.
+          <span className="unstarted">
+            <Link href="/">Dit is een normale link</Link>
+          </span>
+        </Paragraph>
         <div className="unstarted">
           <Blockquote attribution="Label">
             Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *
@@ -187,9 +174,7 @@ export default function Page() {
         <div className="unstarted">
           <Heading level={5}>Dit is een H5</Heading>
         </div>
-        <div className="unstarted">
-          <Paragraph>Dit is een paragraaf.</Paragraph>
-        </div>
+        <Paragraph>Dit is een paragraaf.</Paragraph>
         <div className="unstarted">
           <Separator></Separator>
         </div>