@broxus/react-uikit 0.1.0

package/dist/esm/components/List/index.scss

@@ -0,0 +1,278 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    list-style: none;
+    padding: 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child {
+    margin-bottom: 0;
+}
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul {
+    margin-top: var(--list-margin-top);
+}
+
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * {
+    padding-left: var(--list-padding-left);
+}
+
+/*
+ * Type modifiers
+ */
+
+.uk-list-decimal {
+    counter-reset: decimal;
+}
+
+.uk-list-decimal > * {
+    counter-increment: decimal;
+}
+
+[class*='uk-list'] > ::before {
+    content: '';
+    display: list-item;
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    list-style-position: inside;
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    text-align: right;
+    width: var(--list-padding-left);
+}
+
+.uk-list-disc > ::before {
+    list-style-type: disc;
+}
+
+.uk-list-circle > ::before {
+    list-style-type: circle;
+}
+
+.uk-list-square > ::before {
+    list-style-type: square;
+}
+
+.uk-list-decimal > ::before {
+    content: counter(decimal, decimal) '\200A.\00A0';
+}
+
+.uk-list-hyphen > ::before {
+    content: '–\00A0\00A0';
+}
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::before {
+    color: var(--list-muted-color) !important;
+}
+
+.uk-list-emphasis > ::before {
+    color: var(--list-emphasis-color) !important;
+}
+
+.uk-list-primary > ::before {
+    color: var(--list-primary-color) !important;
+}
+
+.uk-list-secondary > ::before {
+    color: var(--list-secondary-color) !important;
+}
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * {
+    padding-left: var(--list-padding-left);
+}
+
+.uk-list-bullet > ::before {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    content: '';
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    width: var(--list-padding-left);
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+    margin-top: var(--list-divider-margin-top);
+    padding-top: var(--list-divider-margin-top);
+    @if mixin-exists(hook-list-divider) {
+        @include hook-list-divider;
+    }
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+    @if mixin-exists(hook-list-striped) {
+        @include hook-list-striped;
+    }
+}
+
+.uk-list-striped > :nth-of-type(odd) {
+    background: var(--list-striped-background);
+}
+
+.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul {
+    margin-top: var(--list-large-margin-top);
+}
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul {
+    margin-top: 0;
+}
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: var(--list-large-divider-margin-top);
+    padding-top: var(--list-large-divider-margin-top);
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * {
+    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+}
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-list-misc) {
+    @include hook-list-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --list-margin-top: var(--global-small-margin);
+    --list-padding-left: #{$list-padding-left};
+    --list-marker-height: calc(var(--global-line-height) * 1em);
+    --list-muted-color: var(--global-muted-color);
+    --list-emphasis-color: var(--global-emphasis-color);
+    --list-primary-color: var(--global-primary-background);
+    --list-secondary-color: var(--global-secondary-background);
+    --list-bullet-icon-color: var(--global-color);
+    --list-divider-margin-top: var(--global-small-margin);
+    --list-divider-border-width: var(--global-border-width);
+    --list-divider-border: var(--global-border);
+    --list-striped-padding-vertical: var(--global-small-margin);
+    --list-striped-padding-horizontal: var(--global-small-margin);
+    --list-striped-background: var(--global-muted-background);
+    --list-large-margin-top: var(--global-margin);
+    --list-large-divider-margin-top: var(--global-margin);
+    --list-large-striped-padding-vertical: var(--global-margin);
+    --list-large-striped-padding-horizontal: var(--global-small-margin);
+
+    // Inverse
+    --inverse-list-muted-color: var(--inverse-global-muted-color);
+    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-list-primary-color: var(--inverse-global-primary-background);
+    --inverse-list-secondary-color: var(--inverse-global-primary-background);
+    --inverse-list-divider-border: var(--inverse-global-border);
+    --inverse-list-striped-background: var(--inverse-global-muted-background);
+    --inverse-list-bullet-icon-color: var(--inverse-global-color);
+}

package/dist/esm/components/Modal/Modal.d.ts

@@ -0,0 +1,11 @@
+import type { DialogProps } from 'rc-dialog';
+import type { Direction } from '../../types';
+export interface ModalProps extends Omit<DialogProps, 'afterClose'> {
+    centered?: boolean;
+    direction?: Direction;
+    full?: boolean;
+    getContainer?: string | HTMLElement | (() => HTMLElement) | false;
+    type?: 'info' | 'success' | 'warning' | 'error' | 'confirm';
+    onClosed?: () => void;
+}
+export declare function Modal(props: ModalProps): JSX.Element;

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { canUseDocElement } from '@broxus/js-utils';
+import Dialog from 'rc-dialog';
+import classNames from 'classnames';
+import { getTransitionName } from '../../utils';
+import { Close } from '../Close';
+import { useConfig } from '../ConfrigProvider';
+let mousePosition;
+const getClickPosition = (e) => {
+    mousePosition = {
+        x: e.pageX,
+        y: e.pageY,
+    };
+    setTimeout(() => {
+        mousePosition = null;
+    }, 100);
+};
+if (canUseDocElement()) {
+    document.documentElement.addEventListener('click', getClickPosition, true);
+}
+export function Modal(props) {
+    const config = useConfig();
+    const { centered, children, className, closable = true, closeIcon, focusTriggerAfterClose = true, full, prefixCls = `${config.prefixCls}-modal`, visible, onClose, onClosed, ...restProps } = props;
+    return (React.createElement(Dialog, { className: classNames(className, {
+            [`${prefixCls}-centered`]: centered && !full,
+            [`${prefixCls}-full`]: full && !centered,
+        }), focusTriggerAfterClose: focusTriggerAfterClose, maskTransitionName: getTransitionName(`${config.prefixCls}-motion`, 'fade'), mousePosition: mousePosition, prefixCls: prefixCls, transitionName: getTransitionName(`${config.prefixCls}-motion`, 'zoom'), visible: visible, ...restProps, afterClose: onClosed, closable: false, closeIcon: null },
+        closable && (closeIcon || (React.createElement(Close, { className: classNames({
+                [`${prefixCls}-close-default`]: !full,
+                [`${prefixCls}-close-full`]: full,
+            }), component: "button", onClick: onClose }))),
+        children));
+}

package/dist/esm/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+import './index.scss';
+export * from './Modal';

package/dist/esm/components/Modal/index.js

@@ -0,0 +1,2 @@
+import './index.scss';
+export * from './Modal';

package/dist/esm/components/Modal/index.scss

@@ -0,0 +1,376 @@
+// Name:            Modal
+// Description:     Component to create modal dialogs
+//
+// Component:       `uk-modal`
+//
+// Sub-objects:     `uk-modal-page`
+//                  `uk-modal-dialog`
+//                  `uk-modal-header`
+//                  `uk-modal-body`
+//                  `uk-modal-footer`
+//                  `uk-modal-title`
+//                  `uk-modal-close`
+//
+// Adopted:         `uk-modal-close-default`
+//                  `uk-modal-close-outside`
+//                  `uk-modal-close-full`
+//
+// Modifiers:       `uk-modal-container`
+//                  `uk-modal-full`
+//
+// States:          `uk-open`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Modal
+ ========================================================================== */
+
+.uk-modal-wrap {
+    inset: 0;
+    outline: 0 none;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    position: fixed;
+    z-index: var(--modal-z-index);
+}
+
+.uk-modal {
+    box-sizing: border-box;
+    height: 100%;
+    margin: 0 auto;
+    max-width: calc(100vw - 32px);
+    padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
+    pointer-events: none;
+    width: var(--modal-width);
+    z-index: var(--modal-z-index);
+    @if mixin-exists(hook-modal) {
+        @include hook-modal;
+    }
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-modal {
+        padding: var(--modal-padding-vertical-s) var(--modal-padding-horizontal-s);
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-modal {
+        padding-left: var(--modal-padding-horizontal-m);
+        padding-right: var(--modal-padding-horizontal-m);
+    }
+}
+
+
+/* Page
+ ========================================================================== */
+
+/*
+ * Prevent scrollbars
+ */
+
+.uk-modal-page {
+    overflow: hidden;
+}
+
+
+/* Dialog
+ ========================================================================== */
+
+/*
+ * 1. Create position context for spinner and close button
+ * 2. Dimensions
+ * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
+ *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
+ * 4. Style
+ * 5. Slide-in transition
+ */
+
+.uk-modal-content {
+    /* 4 */
+    background: var(--modal-content-background);
+
+    /* 2 */
+    box-sizing: border-box;
+    max-width: calc(100% - 0.01px);
+    pointer-events: auto;
+    position: relative;
+    width: 100%;
+    @if mixin-exists(hook-modal-content) {
+        @include hook-modal-content;
+    }
+}
+
+/* Mask
+ ========================================================================== */
+
+/*
+ * 1. Set position
+ * 2. Mask the background page
+ */
+
+.uk-modal-mask {
+    /* 2 */
+    background: var(--modal-mask-background);
+    height: 100%;
+    inset: 0;
+
+    /* 1 */
+    position: fixed;
+    z-index: var(--modal-z-index);
+    @if mixin-exists(hook-modal-mask) {
+        @include hook-modal-mask;
+    }
+}
+
+/* Centered modifier
+ ========================================================================== */
+
+.uk-modal-centered {
+    align-items: center;
+    display: flex;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Container size
+ * Take the same size as the Container component
+ */
+
+.uk-modal-container .uk-modal-content {
+    width: var(--modal-container-width);
+}
+
+/*
+ * Full size
+ * 1. Remove padding and background from modal
+ * 2. Reset all default declarations from modal dialog
+ */
+
+/* 1 */
+.uk-modal-full {
+    max-width: 100%;
+    padding: 0;
+    width: 100%;
+}
+
+/* 2 */
+.uk-modal-full .uk-modal-content {
+    height: 100%;
+    margin: 0;
+    max-width: 100%;
+    transform: translateY(0);
+    width: 100%;
+    @if mixin-exists(hook-modal-full) {
+        @include hook-modal-full;
+    }
+}
+
+
+/* Sections
+ ========================================================================== */
+
+.uk-modal-body {
+    display: flow-root;
+    padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
+    @if mixin-exists(hook-modal-body) {
+        @include hook-modal-body;
+    }
+}
+
+.uk-modal-header {
+    background: var(--modal-header-background);
+    display: flow-root;
+    padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
+
+    @if mixin-exists(hook-modal-header) {
+        @include hook-modal-header;
+    }
+}
+
+.uk-modal-footer {
+    background: var(--modal-footer-background);
+    display: flow-root;
+    padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
+    @if mixin-exists(hook-modal-footer) {
+        @include hook-modal-footer;
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-modal-body > :last-child,
+.uk-modal-header > :last-child,
+.uk-modal-footer > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-modal-title {
+    font-size: var(--modal-title-font-size);
+    line-height: var(--modal-title-line-height);
+    @if mixin-exists(hook-modal-title) {
+        @include hook-modal-title;
+    }
+}
+
+
+/* Close
+ * Adopts `uk-close`
+ ========================================================================== */
+
+[class*='uk-modal-close-'] {
+    --icon-size: 24px;
+
+    box-sizing: content-box;
+    padding: var(--modal-close-padding);
+    position: absolute;
+    right: var(--modal-close-position);
+    top: var(--modal-close-position);
+    z-index: var(--modal-z-index);
+    @if mixin-exists(hook-modal-close) {
+        @include hook-modal-close;
+    }
+}
+
+/*
+ * Remove margin from adjacent element
+ */
+
+[class*='uk-modal-close-']:first-child + * {
+    margin-top: 0;
+}
+
+/*
+ * Hover
+ */
+
+[class*='uk-modal-close-']:hover {
+    @if mixin-exists(hook-modal-close-hover) {
+        @include hook-modal-close-hover;
+    }
+}
+
+/*
+ * Default
+ */
+
+.uk-modal-close-default {
+    @if mixin-exists(hook-modal-close-default) {
+        @include hook-modal-close-default;
+    }
+}
+
+.uk-modal-close-default:hover {
+    @if mixin-exists(hook-modal-close-default-hover) {
+        @include hook-modal-close-default-hover;
+    }
+}
+
+/*
+ * Outside
+ * 1. Prevent scrollbar on small devices
+ */
+
+.uk-modal-close-outside {
+    color: var(--modal-close-outside-color);
+
+    /* 1 */
+    right: calc(var(--modal-close-padding) * -1);
+    top: var(--modal-close-outside-position);
+    transform: translate(0, unquote('calc(var(--modal-close-outside-translate) * -1)'));
+    @if mixin-exists(hook-modal-close-outside) {
+        @include hook-modal-close-outside;
+    }
+}
+
+.uk-modal-close-outside:hover {
+    color: var(--modal-close-outside-hover-color);
+    @if mixin-exists(hook-modal-close-outside-hover) {
+        @include hook-modal-close-outside-hover;
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    /* 1 */
+    .uk-modal-close-outside {
+        right: var(--modal-close-outside-position);
+        transform: translate(var(--modal-close-outside-translate), unquote('calc(var(--modal-close-outside-translate) * -1)'));
+    }
+}
+
+/*
+ * Full
+ */
+
+.uk-modal-close-full {
+    @if mixin-exists(hook-modal-close-full) {
+        @include hook-modal-close-full;
+    }
+}
+
+.uk-modal-close-full:hover {
+    @if mixin-exists(hook-modal-close-full-hover) {
+        @include hook-modal-close-full-hover;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-modal-misc) {
+    @include hook-modal-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --modal-z-index: #{$global-z-index + 10};
+    --modal-mask-background: #{$modal-mask-background};
+    --modal-padding-horizontal: #{$modal-padding-horizontal};
+    --modal-padding-horizontal-s: var(--global-gutter);
+    --modal-padding-horizontal-m: var(--global-medium-gutter);
+    --modal-padding-vertical: var(--modal-padding-horizontal);
+    --modal-padding-vertical-s: #{$modal-padding-vertical-s};
+    --modal-width: #{$modal-width};
+    --modal-content-background: var(--global-background);
+    --modal-container-width: #{$modal-container-width};
+    --modal-body-padding-horizontal: var(--global-gutter);
+    --modal-body-padding-vertical: var(--global-gutter);
+    --modal-header-padding-horizontal: var(--global-gutter);
+    --modal-header-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
+    --modal-header-background: var(--global-muted-background);
+    --modal-footer-padding-horizontal: var(--global-gutter);
+    --modal-footer-padding-vertical: calc(var(--modal-header-padding-horizontal) / 2);
+    --modal-footer-background: var(--global-muted-background);
+    --modal-title-font-size: var(--global-xlarge-font-size);
+    --modal-title-line-height: #{$modal-title-line-height};
+    --modal-close-position: var(--global-small-margin);
+    --modal-close-padding: #{$modal-close-padding};
+    --modal-close-outside-position: #{$modal-close-outside-position};
+    --modal-close-outside-translate: #{$modal-close-outside-translate};
+    --modal-close-outside-color: lighten($global-inverse-color, 20%);
+    --modal-close-outside-hover-color: var(--global-inverse-color);
+}

package/dist/esm/components/Nav/Divider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare type DividerProps = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare function Divider(props: DividerProps): JSX.Element | null;
+export declare namespace Divider {
+    var displayName: string;
+}