@jetbrains/ring-ui 5.1.23 → 5.1.25

package/components/island-legacy/island-legacy.js

@@ -0,0 +1,19 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './island-legacy.css';
+export default class Island extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames('ring-island', className);
+        return (<div {...restProps} className={classes}>
+        {children}
+      </div>);
+    }
+}
+export { default as Header } from './header-legacy';
+export { default as Content } from './content-legacy';

package/components/island-ng/island-content-ng.js

@@ -0,0 +1,56 @@
+import angular from 'angular';
+
+import styles from '../island/island.css';
+import scheduleRAF from '../global/schedule-raf';
+
+import compile from './island-ng-class-fixer';
+
+const scheduleScroll = scheduleRAF();
+
+const angularModule = angular.module('Ring.island-ng.header', []);
+
+angularModule.directive('rgIslandContent', function islandContentDirective() {
+  return {
+    transclude: true,
+    replace: true,
+    bindToController: {
+      fade: '=?',
+      onScroll: '&?'
+    },
+    compile,
+    template: `
+<div
+  data-test="ring-island-content"
+  class=${styles.content}
+  ng-class="{
+    '${styles.contentWithTopFade}': contentCtrl.fade,
+    '${styles.contentWithBottomFade}': contentCtrl.fade
+  }"
+>
+  <div
+    tabindex="0"
+    class="${styles.scrollableWrapper} js-scrollable-wrapper"
+    ng-transclude
+  ></div>
+</div>
+`,
+    controllerAs: 'contentCtrl',
+    controller: function controller($scope, $element) {
+      const el = $element[0];
+
+      if (this.onScroll) {
+        const scrollable = el.querySelector('.js-scrollable-wrapper');
+
+        const scrollCallback = evt => {
+          const $scrollTop = scrollable.scrollTop;
+          this.onScroll({$event: evt, $scrollTop});
+          $scope.$apply();
+        };
+
+        scrollable.addEventListener('scroll', () => scheduleScroll(scrollCallback));
+      }
+    }
+  };
+});
+
+export default angularModule.name;

package/components/island-ng/island-header-ng.js

@@ -0,0 +1,34 @@
+import angular from 'angular';
+
+import styles from '../island/island.css';
+
+import compile from './island-ng-class-fixer';
+
+const angularModule = angular.module('Ring.island-ng.content', []);
+
+angularModule.directive('rgIslandHeader', function islandHeaderDirective() {
+  return {
+    transclude: true,
+    replace: true,
+    bindToController: {
+      border: '=?'
+    },
+    compile,
+    template: `
+<div
+  data-test="ring-island-header"
+  class="${styles.header}"
+  ng-class="{'${styles.withBottomBorder}': headerCtrl.border}" 
+  ng-transclude
+></div>
+`,
+    controllerAs: 'headerCtrl',
+    controller: function controller() {
+      this.$onInit = () => {
+        this.wrapWithTitle = this.wrapWithTitle !== undefined ? this.wrapWithTitle : true;
+      };
+    }
+  };
+});
+
+export default angularModule.name;

package/components/island-ng/island-ng-class-fixer.js

@@ -0,0 +1,7 @@
+// Workaround fo Angular bug with ng-class & replace: true support
+// See https://github.com/angular/angular.js/issues/5695#issuecomment-31898355
+export default function compile(tElement, tAttrs) {
+  if (tAttrs.ngClass) {
+    tAttrs.ngClass = tAttrs.ngClass.replace(/}\s*{/g, ', ');
+  }
+}

package/components/island-ng/island-ng.js

@@ -0,0 +1,35 @@
+/**
+ * @name Island Ng
+ */
+import angular from 'angular';
+
+import styles from '../island/island.css';
+
+import IslandHeader from './island-header-ng';
+import IslandContent from './island-content-ng';
+import compile from './island-ng-class-fixer';
+
+const angularModule = angular.module('Ring.island-ng', [IslandHeader, IslandContent]);
+
+angularModule.directive('rgIsland', function islandDirective() {
+  return {
+    transclude: true,
+    replace: true,
+    bindToController: {
+      narrow: '='
+    },
+    compile,
+    template: `
+<div
+  data-test="ring-island"
+  class="${styles.island}"
+  ng-class="{'${styles.narrowIsland}': islandCtrl.narrow}"
+  ng-transclude
+></div>
+`,
+    controllerAs: 'islandCtrl',
+    controller: angular.noop
+  };
+});
+
+export default angularModule.name;

package/components/island-ng/island-ng.stories.js

@@ -0,0 +1,54 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import IslandNg from './island-ng';
+
+export default {
+  title: 'Legacy Angular/Island Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Provides an Angular wrapper for Island.',
+    hermione: {captureSelector: '*[data-test~=ring-island]'}
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [IslandNg]);
+
+  return `
+      <rg-island>
+        <rg-island-header border="true">
+          This is header
+        </rg-island-header>
+        <rg-island-content>
+          This is content
+        </rg-island-content>
+      </rg-island>
+    `;
+};
+
+basic.storyName = 'basic';
+
+export const scrollable = () => {
+  angular.module(APP_NAME, [IslandNg]);
+
+  return `
+      <rg-island narrow="true" style="height: 200px; width: 200px;">
+        <rg-island-header border="true">
+          Title
+        </rg-island-header>
+        <rg-island-content fade="true">
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book. It has survived not only five
+          centuries, but also the leap into electronic typesetting, remaining
+          essentially unchanged.
+        </rg-island-content>
+      </rg-island>
+    `;
+};
+
+scrollable.storyName = 'scrollable';

package/components/line/line.css

@@ -0,0 +1,16 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+:global(.ring-line) {
+  display: block;
+
+  width: 100%;
+  height: 1px;
+
+  background-color: var(--ring-line-color);
+}
+
+:global(.ring-line_separated) {
+  margin: calc(unit * 2) 0;
+}

package/components/link/clickableLink.d.ts

@@ -0,0 +1,20 @@
+import React, { PureComponent, AnchorHTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface ClickableLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    onConditionalClick?: ((isPlainLeft: boolean, e: React.MouseEvent<HTMLAnchorElement>) => void) | null | undefined;
+    onPlainLeftClick?: ((e: React.MouseEvent<HTMLAnchorElement>) => void) | null | undefined;
+    activeClassName?: string | null | undefined;
+    disabled?: boolean | undefined;
+}
+export default class ClickableLink extends PureComponent<ClickableLinkProps> {
+    static propTypes: {
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onConditionalClick: PropTypes.Requireable<(...args: any[]) => any>;
+        activeClassName: PropTypes.Requireable<string>;
+        href: PropTypes.Validator<string>;
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    render(): React.JSX.Element;
+}

package/components/link/clickableLink.js

@@ -0,0 +1,33 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+const LEFT_BUTTON = 0;
+// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
+const isPlainLeftClick = (e) => e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
+export default class ClickableLink extends PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func,
+        onPlainLeftClick: PropTypes.func,
+        onConditionalClick: PropTypes.func,
+        activeClassName: PropTypes.string,
+        href: PropTypes.string.isRequired,
+        children: PropTypes.node.isRequired
+    };
+    onClick = (e) => {
+        const { onClick, onConditionalClick, onPlainLeftClick } = this.props;
+        const isPlainLeft = isPlainLeftClick(e);
+        if (onClick) {
+            onClick(e);
+        }
+        if (onConditionalClick) {
+            onConditionalClick(isPlainLeft, e);
+        }
+        if (onPlainLeftClick && isPlainLeft) {
+            e.preventDefault();
+            onPlainLeftClick(e);
+        }
+    };
+    render() {
+        const { onConditionalClick, onPlainLeftClick, activeClassName, href, children, ...restProps } = this.props;
+        return <a href={href} {...restProps} onClick={this.onClick}>{children}</a>;
+    }
+}

package/components/link/link.css

@@ -0,0 +1,88 @@
+@import "../global/variables.css";
+
+.link {
+  cursor: pointer;
+  transition: color var(--ring-fast-ease);
+
+  color: var(--ring-link-color);
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &.hover {
+    transition: none;
+
+    color: var(--ring-link-hover-color);
+  }
+
+  &:hover .inner {
+    border-width: 0;
+    border-bottom: 2px solid;
+    border-image-source: linear-gradient(currentcolor 50%, transparent 50%);
+    border-image-slice: 0 0 100% 0;
+  }
+
+  &.active {
+    color: inherit;
+  }
+
+  &.compatibilityUnderlineMode:hover {
+    text-decoration: underline;
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    & .inner {
+      border: none;
+    }
+  }
+
+  &.pseudo:hover {
+    text-decoration: none;
+
+    /* stylelint-disable-next-line selector-max-specificity */
+    & .inner {
+      border: none;
+    }
+  }
+
+  outline: none;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--ring-border-hover-color);
+  }
+}
+
+@media (min-resolution: 2dppx) {
+  .link:hover .inner {
+    border-bottom-width: 1px;
+  }
+}
+
+.text {
+  border-radius: var(--ring-border-radius);
+}
+
+.inherit:not(:hover) {
+  color: inherit;
+}
+
+.pseudo {
+  margin: 0;
+  padding: 0;
+
+  text-align: left;
+
+  border: 0;
+
+  background: transparent;
+
+  font: inherit;
+
+  &::-moz-focus-inner {
+    padding: 0;
+
+    border: 0;
+  }
+}

package/components/link/link.d.ts

@@ -0,0 +1,148 @@
+import React, { ReactNode, ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { ClickableLinkProps } from './clickableLink';
+export declare function setCompatibilityMode(isEnabled: boolean): void;
+export interface WrapTextProps {
+    children: ReactNode;
+    className?: string | null | undefined;
+}
+type ChildrenFunction = (WrapText: ComponentType<WrapTextProps>) => ReactNode;
+export interface LinkBaseProps {
+    active?: boolean | null | undefined;
+    inherit?: boolean | null | undefined;
+    pseudo?: boolean | null | undefined;
+    hover?: boolean | null | undefined;
+    innerClassName?: string | null | undefined;
+    'data-test'?: string | null | undefined;
+    children: ReactNode | ChildrenFunction;
+}
+export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
+export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
+    new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<P>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LinkProps<P>, context: any): {
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<P>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<P>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<P>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        innerClassName: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+        inherit: PropTypes.Requireable<boolean>;
+        pseudo: PropTypes.Requireable<boolean>;
+        hover: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        'data-test': PropTypes.Requireable<string>;
+        href: PropTypes.Requireable<string>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+declare const _default: {
+    new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: LinkProps<ClickableLinkProps>, context: any): {
+        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<LinkProps<ClickableLinkProps>>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<LinkProps<ClickableLinkProps>>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        innerClassName: PropTypes.Requireable<string>;
+        active: PropTypes.Requireable<boolean>;
+        inherit: PropTypes.Requireable<boolean>;
+        pseudo: PropTypes.Requireable<boolean>;
+        hover: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        'data-test': PropTypes.Requireable<string>;
+        href: PropTypes.Requireable<string>;
+        onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/components/link/link.js

@@ -0,0 +1,73 @@
+import React, { PureComponent, memo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import memoize from '../global/memoize';
+import dataTests from '../global/data-tests';
+import ClickableLink from './clickableLink';
+import styles from './link.css';
+/**
+ * @name Link
+ */
+let isCompatibilityMode = false;
+export function setCompatibilityMode(isEnabled) {
+    isCompatibilityMode = isEnabled;
+}
+const makeWrapText = memoize((innerClassName) => {
+    function WrapText({ className, children }) {
+        const classes = classNames(styles.inner, className, innerClassName);
+        return <span className={classes}>{children}</span>;
+    }
+    WrapText.propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    return memo(WrapText);
+});
+export function linkHOC(ComposedComponent) {
+    const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
+    return class Link extends PureComponent {
+        static propTypes = {
+            className: PropTypes.string,
+            innerClassName: PropTypes.string,
+            active: PropTypes.bool,
+            inherit: PropTypes.bool,
+            pseudo: PropTypes.bool,
+            hover: PropTypes.bool,
+            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+            'data-test': PropTypes.string,
+            href: PropTypes.string,
+            onPlainLeftClick: PropTypes.func,
+            onClick: PropTypes.func
+        };
+        getChildren() {
+            const { children, innerClassName } = this.props;
+            const WrapText = makeWrapText(innerClassName);
+            return typeof children === 'function'
+                ? children(WrapText)
+                : <WrapText>{children}</WrapText>;
+        }
+        render() {
+            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, innerClassName, children, onPlainLeftClick, onClick, ...restProps } = this.props;
+            const useButton = pseudo || !isCustom && href == null;
+            const classes = classNames(styles.link, className, {
+                [styles.active]: active,
+                [styles.inherit]: inherit,
+                [styles.hover]: hover,
+                [styles.compatibilityUnderlineMode]: isCompatibilityMode,
+                [styles.pseudo]: useButton,
+                [styles.text]: typeof children !== 'function'
+            });
+            let props = restProps;
+            if (isCustom && !props.activeClassName) {
+                props = { ...props, activeClassName: styles.active };
+            }
+            if (useButton) {
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{this.getChildren()}</button>);
+            }
+            return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
+          {this.getChildren()}
+        </ComposedComponent>);
+        }
+    };
+}
+export default linkHOC(ClickableLink);

package/components/link/link__legacy.css

@@ -0,0 +1,29 @@
+@import "../global/variables.css";
+
+/**
+  These styles are deprecated and kept for backward compatibility with direct class usages
+  like `<a class="ring-link">link</a>
+ */
+
+:global .ring-link {
+  & {
+    cursor: pointer;
+    transition: color var(--ring-fast-ease);
+
+    text-decoration: none;
+
+    color: var(--ring-link-color);
+  }
+
+  &:hover {
+    transition: none;
+
+    text-decoration: underline;
+
+    color: var(--ring-link-hover-color);
+  }
+}
+
+:global .ring-link_inherit:not(:hover) {
+  color: inherit;
+}

package/components/link-ng/link-ng.js

@@ -0,0 +1,26 @@
+import angular from 'angular';
+
+import styles from '../link/link.css';
+
+/**
+ * @name Link Ng
+ */
+
+
+const angularModule = angular.module('Ring.link', []);
+
+function rgLinkDirective() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    template: `
+<a class="${styles.link} ${styles.compatibilityUnderlineMode}"
+><span class="${styles.inner}" ng-transclude></span></a>
+    `
+  };
+}
+
+angularModule.directive('rgLink', rgLinkDirective);
+
+export default angularModule.name;

package/components/link-ng/link-ng.stories.js

@@ -0,0 +1,22 @@
+import angular from 'angular';
+
+import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
+
+import LinkNG from './link-ng';
+
+export default {
+  title: 'Legacy Angular/Link Ng',
+  decorators: [angularDecorator()],
+
+  parameters: {
+    notes: 'Displays a link.'
+  }
+};
+
+export const basic = () => {
+  angular.module(APP_NAME, [LinkNG]);
+
+  return '<rg-link href="http://example.com" class="test-class">Open example</rg-link>';
+};
+
+basic.storyName = 'Link Ng';