docs([DST-498]): revise Button page (#4045)

* planning

* first example

* save

* full width

* cleanup

* align with table blueprint

* remove variants add anatomy

* add label demo

* more stuff

* save

* save

* add disbled demo

* done!

* add updated badge

* vie -> compete

* area -> section

* remove sentence

* adjustments

* add general usage

* fix link to tooltip

* clarification

* updates!

* more updates

* fix typo

* add on press example adn related

docs/content/components/form/button/button-disabled.demo.tsx

@@ -0,0 +1,11 @@
+import { Button, Stack, Text } from '@marigold/components';
+
+export default () => (
+  <Stack space={1} alignX="left">
+    <Button disabled>Add discount code</Button>
+    <Text color="text-base-disabled" fontSize="xs">
+      Only Fanclub members can add a discount code. If you're a Fanclub member,
+      please log in first.
+    </Text>
+  </Stack>
+);

docs/content/components/form/button/button-link.demo.tsx → docs/content/components/form/button/button-full-width.demo.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@marigold/components';
 
 export default () => (
-  <Button as="a" variant="primary" href="/rx-logo.png" download>
-    Download Logo
+  <Button variant="primary" fullWidth>
+    Proceed to checkout
   </Button>
 );

docs/content/components/form/button/button-icon.demo.tsx

@@ -1,13 +1,14 @@
 import { Button, Inline } from '@marigold/components';
-import { Ticket } from '@marigold/icons';
+import { Edit } from '@marigold/icons';
 
 export default () => (
-  <Inline space={2}>
+  <Inline space={5} alignY="center" alignX="center">
+    <Button variant="primary">Edit</Button>
     <Button variant="primary">
-      <Ticket /> Icon Primary
+      <Edit size={16} /> Edit
     </Button>
-    <Button variant="primary" disabled>
-      <Ticket /> Icon Primary
+    <Button variant="icon" aria-label="Edit">
+      <Edit />
     </Button>
   </Inline>
 );

docs/content/components/form/button/button-press.demo.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+import { Button, Stack, Text } from '@marigold/components';
+
+export default () => {
+  const [pointerType, setPointerType] = useState('');
+  const [count, setCount] = useState(0);
+
+  return (
+    <Stack space={3} alignX="left">
+      <Button
+        variant="secondary"
+        onPress={() => setCount(count + 1)}
+        onPressStart={e => setPointerType(e.pointerType)}
+        onPressEnd={() => setPointerType('')}
+      >
+        Press me
+      </Button>
+      <Text>
+        Number of times presse: {count} (
+        {pointerType
+          ? `Button is pressed via ${pointerType}.`
+          : 'Button not pressed.'}
+        )
+      </Text>
+    </Stack>
+  );
+};