aidos-ui 3.0.0 → 3.0.2

package/src/pages/Badge.mdx

@@ -3,7 +3,7 @@ import { Row } from "../Row";
 
 # Badge
 
-This component is used to bring attention to some other element (e.g. an unread notification, an update, an important element...).
+This is a simple component that can be used to bring attention to a specific part of the user interface, for example an unread notification, an update, an important element...
 
 ---
 

package/src/pages/Button.mdx

@@ -3,13 +3,13 @@ import { Row } from "../Row";
 
 # Button
 
-This component can be used for the user to take actions with a single click.
+The `Button` component can be used for the user to take actions with a single click, it supports a variety of styles each of them with different semantics.
 
 ---
 
-## Basic variants
+## Button variants
 
-The basic `Button` comes in three main variants, and a disabled style that applies to all three.
+The basic `Button` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
 
 - Positive: actions that are going to create something or strongly agree
 - Secondary: actions that are less central to the user experience
@@ -34,7 +34,7 @@ The basic `Button` comes in three main variants, and a disabled style that appli
 
 ---
 
-## Bare variants
+## Bare button
 
 The bare `Button` variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.
 

package/src/pages/Link.mdx

@@ -7,9 +7,9 @@ The `Link` component looks the same as the `Button` component and the only diffe
 
 ---
 
-## Basic variants
+## Link variants
 
-The basic `Link` comes in three main variants, and a disabled style that applies to all three.
+The basic `Link` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
 
 - Positive: actions that are going to create something or strongly agree
 - Secondary: actions that are less central to the user experience
@@ -34,7 +34,7 @@ The basic `Link` comes in three main variants, and a disabled style that applies
 
 ---
 
-## Bare variants
+## Bare link
 
 The bare `Link` variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.
 

package/src/pages/List.mdx

@@ -11,6 +11,8 @@ The `List` component is used to represent data in a list, it has several compone
 
 ## Base list
 
+The default list style has round borders and high contrast background. It can opt out of the roundedness (for example it is useful to go edge-to-edge on small displays) and it also support a bare style, with much more subtle styling.
+
 <List ariaLabel="example">
   <ListItem
     headline="Headline"
@@ -105,20 +107,114 @@ The `List` component is used to represent data in a list, it has several compone
 </List>
 ```
 
+<List carded={false} ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+
+```js
+<List carded={false} ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+```
+
 ---
 
 ## Bare list
 
+The bare list, like other components that support the `bare` style, is much more subtle, has less contrast and no borders. For elements that are constantly on display but may not always be necessary (for example navigation elements) it could be preferred to make the user interface cleaner and lighter.
+
 <List bare ariaLabel="example">
   <ListItem
-    bare
     headline="Headline"
     body="Body"
     addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
     addOnPosition="start"
   />
   <ListButtonItem
-    bare
     color="positive"
     headline="Positive button"
     addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
@@ -126,7 +222,6 @@ The `List` component is used to represent data in a list, it has several compone
     onClick={() => {}}
   />
   <ListButtonItem
-    bare
     color="secondary"
     headline="Secondary button"
     addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
@@ -134,7 +229,6 @@ The `List` component is used to represent data in a list, it has several compone
     onClick={() => {}}
   />
   <ListButtonItem
-    bare
     color="negative"
     headline="Negative button"
     addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
@@ -143,7 +237,6 @@ The `List` component is used to represent data in a list, it has several compone
   />
   <ListLinkItem
     href="/"
-    bare
     color="secondary"
     headline="Selected link"
     selected
@@ -152,7 +245,6 @@ The `List` component is used to represent data in a list, it has several compone
   />
   <ListLinkItem
     href="/"
-    bare
     headline="Link"
     addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
     addOnPosition="start"
@@ -163,14 +255,12 @@ The `List` component is used to represent data in a list, it has several compone
 ```js
 <List bare ariaLabel="example">
   <ListItem
-    bare
     headline="Headline"
     body="Body"
     addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
     addOnPosition="start"
   />
   <ListButtonItem
-    bare
     color="positive"
     headline="Positive button"
     addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
@@ -178,7 +268,6 @@ The `List` component is used to represent data in a list, it has several compone
     onClick={() => {}}
   />
   <ListButtonItem
-    bare
     color="secondary"
     headline="Secondary button"
     addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
@@ -186,7 +275,6 @@ The `List` component is used to represent data in a list, it has several compone
     onClick={() => {}}
   />
   <ListButtonItem
-    bare
     color="negative"
     headline="Negative button"
     addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
@@ -195,7 +283,6 @@ The `List` component is used to represent data in a list, it has several compone
   />
   <ListLinkItem
     href="/"
-    bare
     color="secondary"
     headline="Selected link"
     selected
@@ -204,7 +291,6 @@ The `List` component is used to represent data in a list, it has several compone
   />
   <ListLinkItem
     href="/"
-    bare
     headline="Link"
     addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
     addOnPosition="start"
@@ -218,26 +304,26 @@ The `List` component is used to represent data in a list, it has several compone
 ## Sublist
 
 <List bare ariaLabel="example">
-  <Sublist bare label="Sublist">
-    <ListItem bare headline="Headline 1" body="Body 1" />
-    <ListItem bare headline="Headline 2" body="Body 2" />
-    <ListItem bare headline="Headline 3" body="Body 3" />
+  <Sublist label="Sublist">
+    <ListItem headline="Headline 1" body="Body 1" />
+    <ListItem headline="Headline 2" body="Body 2" />
+    <ListItem headline="Headline 3" body="Body 3" />
   </Sublist>
 </List>
 
 ```js
 <List bare ariaLabel="example">
-  <Sublist bare label="Sublist">
-    <ListItem bare headline="Headline 1" body="Body 1" />
-    <ListItem bare headline="Headline 2" body="Body 2" />
-    <ListItem bare headline="Headline 3" body="Body 3" />
+  <Sublist label="Sublist">
+    <ListItem headline="Headline 1" body="Body 1" />
+    <ListItem headline="Headline 2" body="Body 2" />
+    <ListItem headline="Headline 3" body="Body 3" />
   </Sublist>
 </List>
 ```
 
 ---
 
-## navigation
+## Keyboard navigation
 
 Lists support keyboard navigation by default via the `useNavigation` hook. It can be disabled by passing the prop `navigation` and tries to emulate the [grid layout spec](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/):
 

package/src/pages/ListHeader.mdx

@@ -50,44 +50,40 @@ import { ListHeaderItem } from "../ListHeaderItem";
 ## Bare list headers
 
 <List bare ariaLabel="example">
-  <ListHeaderItem bare headline="Header" />
-  <ListItem bare headline="Headline 1" body="Body 1" />
+  <ListHeaderItem headline="Header" />
+  <ListItem headline="Headline 1" body="Body 1" />
   <ListHeaderItem
-    bare
     headline="Header"
     addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
   />
-  <ListItem bare headline="Headline 2" body="Body 2" />
-  <ListHeaderItem bare highlight headline="Header" />
-  <ListItem bare headline="Headline 3" body="Body 3" />
+  <ListItem headline="Headline 2" body="Body 2" />
+  <ListHeaderItem highlight headline="Header" />
+  <ListItem headline="Headline 3" body="Body 3" />
   <ListHeaderItem
-    bare
     highlight
     headline="Header"
     addOn={<Icon icon="fa-chain-broken" size="medium" color="highlight" />}
   />
-  <ListItem bare withDivider={false} headline="Headline 4" body="Body 3" />
+  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
 </List>
 
 ```js
 <List bare ariaLabel="example">
-  <ListHeaderItem bare headline="Header" />
-  <ListItem bare headline="Headline 1" body="Body 1" />
+  <ListHeaderItem headline="Header" />
+  <ListItem headline="Headline 1" body="Body 1" />
   <ListHeaderItem
-    bare
     headline="Header"
     addOn={<Icon icon="fa-chain-broken" size="medium" color="primary" />}
   />
-  <ListItem bare headline="Headline 2" body="Body 2" />
-  <ListHeaderItem bare highlight headline="Header" />
-  <ListItem bare headline="Headline 3" body="Body 3" />
+  <ListItem headline="Headline 2" body="Body 2" />
+  <ListHeaderItem highlight headline="Header" />
+  <ListItem headline="Headline 3" body="Body 3" />
   <ListHeaderItem
-    bare
     highlight
     headline="Header"
     addOn={<Icon icon="fa-chain-broken" size="medium" color="light" />}
   />
-  <ListItem bare withDivider={false} headline="Headline 4" body="Body 3" />
+  <ListItem withDivider={false} headline="Headline 4" body="Body 3" />
 </List>
 ```