feat(docs/styling): add dos and donts layout and styling

packages/documentation/docs/guidelines/language/basics.md

@@ -35,33 +35,27 @@ The following sections contain advice we follow at Siemens to create our own pro
 
 - Avoid using negative contractions as they can appear too informal
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='their, them, theirs, salesperson'></Guideline>
-<Guideline do={false} label='his, hers, him, salesman'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Welcome to this application'></Guideline>
-<Guideline do={false} label='Hey there!'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='X appears when detail view has selected events'></Guideline>
-<Guideline do={false} label='X doesn’t appear if detail view has no selected events'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='cannot, will not'></Guideline>
-<Guideline do={false} label='can’t, won’t'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='you’ll, we’ve'></Guideline>
-<Guideline do={false} label='you will, we have'></Guideline>
-</span>
-
-</div>
+::::layout
+
+:::col
+[!do]
+their, them, theirs, salesperson
+Welcome to this application
+X appears when detail view has selected events
+cannot, will not
+you’ll, we’ve
+:::
+
+:::col
+[!dont]
+his, hers, him, salesman
+Hey there!
+X doesn’t appear if detail view has no selected events
+can’t, won’t
+you will, we have
+:::
+
+::::
 
 ### Length
 
@@ -85,90 +79,60 @@ The following sections contain advice we follow at Siemens to create our own pro
 
 - Capitalize named app functions and UI elements: Go to Settings, Allocate users in User management, Press Ok
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='Go to Settings'></Guideline>
-<Guideline do={false} label='Go To Settings'></Guideline>
-</span>
+::::layout
 
-<span class="m-2">
-<Guideline do label='Press OK'></Guideline>
-<Guideline do={false} label='Press Ok'></Guideline>
-</span>
+:::col
+[!do]
+Go to Settings
+Press OK
+Log in
+For more information, see Siemens Industry Online Support.
+:::
 
-<span class="m-2">
-<Guideline do label='Log in'></Guideline>
-<Guideline do={false} label='LOG IN'></Guideline>
-</span>
+:::col
+[!dont]
+Go To Settings
+Press Ok
+LOG IN
+For more information, see Siemens industry online support.
+:::
 
-<span class="m-2">
-<Guideline do label='For more information, see Siemens Industry Online Support.'></Guideline>
-<Guideline do={false} label='For more information, see Siemens industry online support.'></Guideline>
-</span>
-
-</div>
+::::
 
 ### Common UX wording mistakes
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='time zone'></Guideline>
-<Guideline do={false} label='timezone'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='log file'></Guideline>
-<Guideline do={false} label='logfile'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='log in (as an action)'></Guideline>
-<Guideline do={false} label='login'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='login (as a noun)'></Guideline>
-<Guideline do={false} label='log in'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='equipment'></Guideline>
-<Guideline do={false} label='equipments'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='feedback'></Guideline>
-<Guideline do={false} label='feedbacks'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='training'></Guideline>
-<Guideline do={false} label='trainings'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='current'></Guideline>
-<Guideline do={false} label='actual'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='avoid "shall"'></Guideline>
-<Guideline do={false} label='user shall manage users'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Siemens has'></Guideline>
-<Guideline do={false} label='Siemens have'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='34 million / 35 billion'></Guideline>
-<Guideline do={false} label='34’ / 35“'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='34 million'></Guideline>
-<Guideline do={false} label='34 millions'></Guideline>
-</span>
-
-</div>
+::::layout
+
+:::col
+[!do]
+time zone
+log file
+log in (as an action)
+login (as a noun)
+equipment
+feedback
+training
+current
+avoid "shall"
+Siemens has
+34 million / 35 billion
+34 million
+:::
+
+:::col
+[!dont]
+timezone
+logfile
+login
+log in
+equipments
+feedbacks
+trainings
+actual
+user shall manage users
+Siemens have
+34’ / 35“
+34 millions
+:::
+
+::::

packages/documentation/docs/guidelines/language/best-practices.md

@@ -15,28 +15,25 @@ import Guideline from '@site/src/components/Guideline';
 
 - Confirmation messages: Use the same verb as the transitional text
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='Updating user roles…'></Guideline>
-<Guideline do={false} label='Getting ready…'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Submitting log files…'></Guideline>
-<Guideline do={false} label='Chopping fruit…'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Saving project… > Project saved'></Guideline>
-<Guideline do={false} label='Saving project… > Project uploaded'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Training models… > Models trained'></Guideline>
-<Guideline do={false} label='Training models… > Training done'></Guideline>
-</span>
-
-</div>
+::::layout
+
+:::col
+[!do]
+Updating user roles…
+Submitting log files…
+Saving project… > Project saved
+Training models… > Models trained
+:::
+
+:::col
+[!dont]
+Getting ready…
+Chopping fruit…
+Saving project… > Project uploaded
+Training models… > Training done
+:::
+
+::::
 
 ### Error messages
 
@@ -50,15 +47,22 @@ import Guideline from '@site/src/components/Guideline';
 
 - Use … to show an action is required, i.e. fill this in …
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='System error: You’re offline. Check your connection and try again.'></Guideline>
-<Guideline do label='File error: We cannot upload this file. Try uploading again.'></Guideline>
-<Guideline do label='Permission error: To carry out this task, you need more permissions. Contact admin to change permissions. '></Guideline>
-<Guideline do={false} label='What did you do!?'></Guideline>
-<Guideline do={false} label='The email address you entered does not match the required format. Please enter your email address using the standard format.'></Guideline>
-</span>
-</div>
+::::layout
+
+:::col
+[!do]
+System error: You’re offline. Check your connection and try again.
+File error: We cannot upload this file. Try uploading again.
+Permission error: To carry out this task, you need more permissions. Contact admin to change permissions.
+:::
+
+:::col
+[!dont]
+What did you do!?
+The email address you entered does not match the required format. Please enter your email address using the standard format.
+:::
+
+::::
 
 ### Empty-state text
 
@@ -72,23 +76,23 @@ import Guideline from '@site/src/components/Guideline';
 
 - Use wording to show users how to resolve the empty state, e.g. with an action, click, etc.
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='Allocate users in User management.'></Guideline>
-<Guideline do={false} label='No allocated users.'></Guideline>
-</span>
+::::layout
 
-<span class="m-2">
-<Guideline do label='To show rows, select a project.'></Guideline>
-<Guideline do={false} label='No rows to show.'></Guideline>
-</span>
+:::col
+[!do]
+Allocate users in User management.
+To show rows, select a project.
+To save a project, select Save in Project detail list.
+:::
 
-<span class="m-2">
-<Guideline do label='To save a project, select Save in Project detail list.'></Guideline>
-<Guideline do={false} label='No projects saved.'></Guideline>
-</span>
+:::col
+[!dont]
+No allocated users.
+No rows to show.
+No projects saved.
+:::
 
-</div>
+::::
 
 ### Restoring behavior of items
 
@@ -100,14 +104,18 @@ import Guideline from '@site/src/components/Guideline';
 
 - Do not use Delete and Remove as synonym
 
-<div class="d-flex flex-wrap">
-<span class="m-2">
-<Guideline do label='Create a chart and delete a chart'></Guideline>
-<Guideline do={false} label='Create a chart and remove it'></Guideline>
-</span>
-
-<span class="m-2">
-<Guideline do label='Add a sensor to a chart and remove a sensor from chart'></Guideline>
-<Guideline do={false} label='Add a sensor and delete the sensor'></Guideline>
-</span>
-</div>
+::::layout
+
+:::col
+[!do]
+Create a chart and delete a chart
+Add a sensor to a chart and remove a sensor from chart
+:::
+
+:::col
+[!dont]
+Create a chart and remove it
+Add a sensor and delete the sensor
+:::
+
+::::