@dhis2/ui-constants 10.16.1 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-constants",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "Constants used in the UI libs",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
@@ -31,7 +31,8 @@
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "types": "types"
 }

package/src/colors.js

@@ -0,0 +1,75 @@
+export const colors = {
+    /*blue*/
+    blue900: '#093371',
+    blue800: '#0d47a1',
+    blue700: '#1565c0',
+    blue600: '#147cd7',
+    blue500: '#2196f3',
+    blue400: '#42a5f5',
+    blue300: '#90caf9',
+    blue200: '#c5e3fc',
+    blue100: '#e3f2fd',
+    blue050: '#f5fbff',
+
+    /*teal*/
+    teal900: '#00332b',
+    teal800: '#004d40',
+    teal700: '#00695c',
+    teal600: '#00796b',
+    teal500: '#00897b',
+    teal400: '#009688',
+    teal300: '#4db6ac',
+    teal200: '#b2dfdb',
+    teal100: '#e0f2f1',
+    teal050: '#f1f9f9',
+
+    /*red*/
+    red900: '#330202',
+    red800: '#891515',
+    red700: '#b71c1c',
+    red600: '#c62828',
+    red500: '#d32f2f',
+    red400: '#f44336',
+    red300: '#e57373',
+    red200: '#ffcdd2',
+    red100: '#ffe5e8',
+    red050: '#fff5f6',
+
+    /*yellow*/
+    yellow900: '#6f3205',
+    yellow800: '#bb460d',
+    yellow700: '#e56408',
+    yellow600: '#ff8302',
+    yellow500: '#ff9302',
+    yellow400: '#ffa902',
+    yellow300: '#ffc324',
+    yellow200: '#ffe082',
+    yellow100: '#ffecb3',
+    yellow050: '#fff8e1',
+
+    /*green*/
+    green900: '#103713',
+    green800: '#1b5e20',
+    green700: '#2e7d32',
+    green600: '#388e3c',
+    green500: '#43a047',
+    green400: '#4caf50',
+    green300: '#a5d6a7',
+    green200: '#c8e6c9',
+    green100: '#e8f5e9',
+    green050: '#f4fbf4',
+
+    /*grey*/
+    grey900: '#212934',
+    grey800: '#404b5a',
+    grey700: '#4a5768',
+    grey600: '#6C7787',
+    grey500: '#a0adba',
+    grey400: '#d5dde5',
+    grey300: '#e8edf2',
+    grey200: '#f3f5f7',
+    grey100: '#f8f9fa',
+    grey050: '#fbfcfd',
+
+    white: '#ffffff',
+}

package/src/elevations.js

@@ -0,0 +1,8 @@
+export const elevations = {
+    e100: '0px 1px 2px rgba(33,41,52,0.06), 0px 1px 3px rgba(33,41,52,0.1)',
+    e200: '0px 0px 1px rgba(33,41,52,0.1), 0px 4px 6px -1px rgba(33,41,52,0.1), 0px 2px 4px -1px rgba(33,41,52,0.06)',
+    e300: '0px 10px 15px -3px rgba(33,41,52,0.1), 0px 4px 6px -2px rgba(33,41,52,0.05)',
+    e400: '0px 25px 50px -12px rgba(33, 41, 52, 0.25)',
+    popover:
+        '0 4px 12px rgba(12, 14, 16, 0.15), 0 0 0 1px rgba(12, 14, 16, 0.05)',
+}

package/src/index.js

@@ -0,0 +1,7 @@
+export * from './colors.js'
+export * from './theme.js'
+export * from './layers.js'
+export * from './spacers.js'
+export * from './elevations.js'
+
+export * as sharedPropTypes from './shared-prop-types.js'

package/src/layers.js

@@ -0,0 +1,5 @@
+export const layers = {
+    applicationTop: 2000,
+    blocking: 3000,
+    alert: 9999,
+}

package/src/shared-prop-types.js

@@ -0,0 +1,146 @@
+import { mutuallyExclusive } from '@dhis2/prop-types'
+import PropTypes from 'prop-types'
+
+/**
+ * Status propType
+ * @return {PropType} Mutually exclusive status: valid/warning/error
+ */
+export const statusPropType = mutuallyExclusive(
+    ['valid', 'warning', 'error'],
+    PropTypes.bool
+)
+// Exported for storybook
+export const statusArgType = {
+    table: {
+        type: {
+            summary: 'bool',
+            detail: "'valid', 'warning', and 'error' are mutually exclusive props",
+        },
+    },
+    control: { type: 'boolean' },
+}
+
+export const buttonVariantArgType =
+    // No description because it should be set for the component description
+    {
+        table: { type: { summary: 'bool' } },
+        control: { type: 'boolean' },
+    }
+
+/**
+ * Size variant propType
+ * @return {PropType} Mutually exclusive variants:
+ * small/large
+ */
+export const sizePropType = mutuallyExclusive(
+    ['small', 'large', 'extrasmall', 'fluid'],
+    PropTypes.bool
+)
+export const sizeArgType = {
+    // No description because it should be set in the component description
+    table: {
+        type: {
+            summary: 'bool',
+            detail: 'size props are mutually exclusive',
+        },
+    },
+    control: {
+        type: 'boolean',
+    },
+}
+
+/**
+ * Inside alignment props
+ * @return {PropType} PropType that validates the inside alignment.
+ */
+export const insideAlignmentPropType = PropTypes.oneOf([
+    'top',
+    'middle',
+    'bottom',
+])
+export const insideAlignmentArgType = {
+    description: 'Inside alignment of the component',
+    table: {
+        type: {
+            summary: "'top' | 'middle' | 'bottom'",
+        },
+    },
+    control: {
+        type: 'select',
+        options: ['top', 'middle', 'bottom'],
+    },
+}
+
+/**
+ * Placement properties against reference element
+ * @return {PropType} PropType that validates placements.
+ */
+export const popperPlacementPropType = PropTypes.oneOf([
+    'auto',
+    'auto-start',
+    'auto-end',
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'right',
+    'right-start',
+    'right-end',
+    'left',
+    'left-start',
+    'left-end',
+])
+export const popperPlacementArgType = {
+    description: 'Placement properties relative to reference element',
+    table: {
+        type: {
+            summary: 'string (one of several)',
+            detail: 'see options in menu',
+        },
+    },
+    control: {
+        type: 'select',
+        options: [
+            'auto',
+            'auto-start',
+            'auto-end',
+            'top',
+            'top-start',
+            'top-end',
+            'bottom',
+            'bottom-start',
+            'bottom-end',
+            'right',
+            'right-start',
+            'right-end',
+            'left',
+            'left-start',
+            'left-end',
+        ],
+    },
+}
+
+/**
+ * Either a DOM node, React ref or a virtual element
+ * @return {PropType} Validate that prop is either a function or an
+ * instance of an Element.
+ */
+export const popperReferencePropType = PropTypes.oneOfType([
+    // DOM node
+    PropTypes.instanceOf(Element),
+    // React ref - React.useRef() or React.createRef()
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    // Virtual element
+    PropTypes.shape({ getBoundingClientRect: PropTypes.func }),
+])
+export const popperReferenceArgType = {
+    description:
+        'A reference to the element to position against: either a DOM node, React ref, \
+        or an instance of an element',
+    table: {
+        type: { summary: 'DOM node | React ref | Virtual element' },
+    },
+    control: { type: null },
+}

package/src/spacers.js

@@ -0,0 +1,37 @@
+/** Number values of the spacer definitions */
+export const spacersNum = {
+    dp4: 4,
+    dp8: 8,
+    dp12: 12,
+    dp16: 16,
+    dp24: 24,
+    dp32: 32,
+    dp48: 48,
+    dp64: 64,
+    dp96: 96,
+    dp128: 128,
+    dp192: 192,
+    dp256: 256,
+    dp384: 384,
+    dp512: 512,
+    dp640: 640,
+}
+
+/** Pixel values of the spacer definitions */
+export const spacers = {
+    dp4: `${spacersNum.dp4}px`,
+    dp8: `${spacersNum.dp8}px`,
+    dp12: `${spacersNum.dp12}px`,
+    dp16: `${spacersNum.dp16}px`,
+    dp24: `${spacersNum.dp24}px`,
+    dp32: `${spacersNum.dp32}px`,
+    dp48: `${spacersNum.dp48}px`,
+    dp64: `${spacersNum.dp64}px`,
+    dp96: `${spacersNum.dp96}px`,
+    dp128: `${spacersNum.dp128}px`,
+    dp192: `${spacersNum.dp192}px`,
+    dp256: `${spacersNum.dp256}px`,
+    dp384: `${spacersNum.dp384}px`,
+    dp512: `${spacersNum.dp512}px`,
+    dp640: `${spacersNum.dp640}px`,
+}

package/src/theme.js

@@ -0,0 +1,38 @@
+import { colors } from './colors.js'
+
+export const theme = {
+    /* theme */
+    fonts: 'Roboto, sans-serif',
+
+    /*primary*/
+    primary900: colors.blue900,
+    primary800: colors.blue800,
+    primary700: colors.blue700,
+    primary600: colors.blue600,
+    primary500: colors.blue500,
+    primary400: colors.blue400,
+    primary300: colors.blue300,
+    primary200: colors.blue200,
+    primary100: colors.blue100,
+    primary050: colors.blue050,
+
+    /*secondary*/
+    secondary900: colors.teal900,
+    secondary800: colors.teal800,
+    secondary700: colors.teal700,
+    secondary600: colors.teal600,
+    secondary500: colors.teal500,
+    secondary400: colors.teal400,
+    secondary300: colors.teal300,
+    secondary200: colors.teal200,
+    secondary100: colors.teal100,
+    secondary050: colors.teal050,
+
+    /*status*/
+    default: colors.grey700,
+    error: colors.red500,
+    valid: colors.blue600,
+    warning: colors.yellow500,
+    disabled: colors.grey600,
+    focus: colors.blue600,
+}