📚 Adapts Heading docs/stories to be as the Text component

frontend/src/app/main/ui/ds/foundations/typography/heading.mdx

@@ -5,19 +5,14 @@ import * as HeadingStories from "./heading.stories";
 
 # Headings
 
-This component will add a heading tag element to our code.
+This component will add a heading tag element (ie. `<h1>`, `<h2>`, etc.) to our code.
 
 ## Technical notes
 
-This components accepts to props:
-
-- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
-- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
-
-You can check passed props to renderized components on hover `level / typography`;
-
 ### Using typography IDs
 
+This component accepts any [typography IDs](?path=/docs/foundations-typography--docs).
+
 There are typography ID definitions you can use in your code rather than typing the
 typography ID by hand.
 

frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx

@@ -20,17 +20,28 @@ export default {
       control: { type: "select" },
     },
   },
+  parameters: {
+    controls: { exclude: ["children", "theme", "style"] },
+    backgrounds: { default: "light" },
+  },
+  args: {
+    children: "Lorem ipsum",
+    theme: "light",
+    style: {
+      color: "var(--color-foreground-primary)",
+      background: "var(--color-background-primary)",
+    },
+  },
+  render: ({ style, children, theme, ...args }) => (
+    // TODO: this <div> is a hack until we have proper theming
+    <div style={style} className={theme}>
+      <Heading {...args}>{children}</Heading>
+    </div>
+  ),
 };
 
 export const AnyHeading = {
   name: "Heading",
-  render: ({ level, typography, ...args }) => (
-    <StoryWrapper theme="default">
-      <Heading level={level} typography={typography} {...args}>
-        Lorem ipsum
-      </Heading>
-    </StoryWrapper>
-  ),
   args: {
     level: 1,
     typography: "display",