docs: create elevation story

dhis2 · Sep 9, 2024 · 0ac1276 · 0ac1276
1 parent aa98c88
commit 0ac1276
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 15 deletions.
diff --git a/collections/forms/i18n/en.pot b/collections/forms/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-09-08T21:28:05.878Z\n"
-"PO-Revision-Date: 2024-09-08T21:28:05.878Z\n"
+"POT-Creation-Date: 2024-09-09T12:09:30.724Z\n"
+"PO-Revision-Date: 2024-09-09T12:09:30.724Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

diff --git a/components/css/src/css-variables/css-variables.prod.stories.js b/components/css/src/css-variables/css-variables.prod.stories.js
@@ -49,3 +49,64 @@ export const NoVariables = (args) => (
         <p>By default no custom properties are inserted.</p>
     </App>
 )
+
+export const Elevations = (args) => (
+    <App>
+        <CssVariables elevations {...args} />
+        <div
+            style={{
+                display: 'flex',
+                gap: '8px',
+            }}
+        >
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e100',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e100
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e200',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e200
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e300',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e300
+            </div>
+            <div
+                style={{
+                    background: 'white',
+                    boxShadow: 'var(--elevations-e400',
+                    display: 'inline-block',
+                    padding: '16px',
+                    marginRight: '16px',
+                    fontFamily: 'monospace',
+                }}
+            >
+                e400
+            </div>
+        </div>
+    </App>
+)
diff --git a/docs/docs/components/elevation.md b/docs/docs/components/elevation.md
@@ -3,8 +3,6 @@ title: Elevation
 ---
 
 import { Demo } from '@site/src/components/DemoComponent.jsx'
-import { CssVariables } from '@dhis2/ui'
-
 import API from '../../../components/css/API.md'
 
 # Elevation
@@ -41,15 +39,10 @@ This example usees the `e200` variant.
 
 ### Variants
 
-<Demo>
-    <CssVariables elevations/>
-    <div className='stacked-examples-horizontal'>
-        <div style={{background: 'white', boxShadow: 'var(--elevations-e100', display: 'inline-block', padding: '16px', marginRight: '16px', fontFamily: 'monospace'}}>e100</div>
-        <div style={{background: 'white', boxShadow: 'var(--elevations-e200', display: 'inline-block', padding: '16px', marginRight: '16px', fontFamily: 'monospace'}}>e200</div>
-        <div style={{background: 'white', boxShadow: 'var(--elevations-e300', display: 'inline-block', padding: '16px', marginRight: '16px', fontFamily: 'monospace'}}>e300</div>
-        <div style={{background: 'white', boxShadow: 'var(--elevations-e400', display: 'inline-block', padding: '16px', marginRight: '16px', fontFamily: 'monospace'}}>e400</div>
-    </div>
-</Demo>
+<Demo
+    path="css-variables--elevations"
+    height="120px"
+/>
 
 -   There are four levels of elevation: `e100`, `e200`, `e300`, `e400`.
 -   Use different elevation levels to communicate different depths or stacks of elements.

diff --git a/docs/src/constants.js b/docs/src/constants.js
@@ -1,2 +1,2 @@
-// export const DEMO_URL = 'http://127.0.0.1:8080'
-export const DEMO_URL = '/demo'
+export const DEMO_URL = 'http://127.0.0.1:8080'
+// export const DEMO_URL = '/demo'