@dhis2-ui/center 10.16.2 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/center",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI Center",
     "repository": {
         "type": "git",
@@ -33,13 +33,14 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "react": "^18.3.1",

package/src/center.js

@@ -0,0 +1,54 @@
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+export const Center = forwardRef(
+    (
+        {
+            className,
+            dataTest = 'dhis2-uicore-centeredcontent',
+            children,
+            position = 'middle',
+        },
+        ref
+    ) => (
+        <div
+            className={cx('center', className, position)}
+            data-test={dataTest}
+            ref={ref}
+        >
+            <div className="center-inner-content">{children}</div>
+
+            <style jsx>{`
+                .center {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    flex-direction: row;
+                    pointer-events: none;
+                    align-items: center;
+                }
+                .center.top {
+                    align-items: flex-start;
+                }
+                .center.bottom {
+                    align-items: flex-end;
+                }
+                .center-inner-content {
+                    pointer-events: all;
+                }
+            `}</style>
+        </div>
+    )
+)
+
+Center.displayName = 'Center'
+
+Center.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    /** Vertical alignment */
+    position: PropTypes.oneOf(['top', 'middle', 'bottom']),
+}

package/src/center.prod.stories.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Center } from './center.js'
+
+const description = `
+Centers children horizontally, and by default, vertically.
+Use the \`top\` or \`bottom\` props to change vertical alignment.
+
+\`\`\`js
+import { CenteredContent } from '@dhis2/ui'
+\`\`\`
+`
+
+const Wrapper = (story) => <div style={{ height: '150px' }}>{story()}</div>
+
+export default {
+    title: 'Center',
+    component: Center,
+    decorators: [Wrapper],
+    parameters: { docs: { description: { component: description } } },
+}
+
+const Template = (args) => (
+    <Center {...args}>
+        <span>Center me</span>
+    </Center>
+)
+
+export const Default = Template.bind({})
+
+export const Top = Template.bind({})
+Top.args = { position: 'top' }
+
+export const Bottom = Template.bind({})
+Bottom.args = { position: 'bottom' }

package/src/index.js

@@ -0,0 +1 @@
+export { Center } from './center.js'