Link Design-System: Default and Accessible themes

src/design-system/index.css

@@ -4,8 +4,9 @@
 
 @import './label.css';
 @import './list.css';
+@import './link.css';
 @import './paragraph.css';
 @import './insert-text.css';
 @import './heading.css';
 @import './highlight.css';
-@import './keyboard-input.css';
+@import './keyboard-input.css';

src/design-system/link.css

@@ -0,0 +1,17 @@
+.dcx-link {
+  color: token('color-text-link');
+  font-size: token('font-size-body');
+  font-family: token('font-family-body');
+
+  &:visited {
+    color: token('color-text-link-visited');
+  }
+
+  &:active {
+    color: token('color-text-link-active');
+  }
+
+  &:hover {
+    color: token('color-text-link-hover');
+  }
+}

src/design-system/tokens.json

@@ -84,8 +84,12 @@
   "color-text-heading-level_5": "#000",
   "color-text-heading-level_6": "#000",
   "color-text-highlight_body": "black",
+  "color-text-link": "#1d70b8",
+  "color-text-link-active": "#14558d",
+  "color-text-link-hover": "#14558d",
+  "color-text-link-visited": "#14558d",
   "color-text-paragraph": "black",
-  "color-text-pre_body":  "#000",
+  "color-text-pre_body": "#000",
   "font-action-line-height": "20px",
   "font-action-size": "16px",
   "font-action_label-line-height": "20px",

stories/Link/design-system/AccessibleTheme.stories.js

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import { Link } from '../../../src/link/Link';
+import style from '!raw-loader!../../themes/accessible.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme aimed at easing the vizualization of the different elements of the component in order to improve the experience for people that have visual impairments.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Link/Design system/Accessible',
+  component: Link,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/accessible.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-link', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+const timestamp = new Date().getTime();
+const link = `#?time=${timestamp}`;
+
+export const Default = {
+  name: 'Default',
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};
+
+export const Visited = {
+  name: 'Visited',
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};

stories/Link/design-system/DarkTheme.stories.js

@@ -0,0 +1,80 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import { Link } from '../../../src/link/Link';
+import style from '!raw-loader!../../themes/dark.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases how to customize the component so it can be used on dark backgrounds.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Link/Design system/Dark',
+  component: Link,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/dark.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-link', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-link="editor" />
+    </LiveProvider>
+  ),
+};
+const timestamp = new Date().getTime();
+const link = `#?time=${timestamp}`;
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};
+
+export const Visited = {
+  name: 'Visited',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};

stories/Link/design-system/Default.stories.js

@@ -0,0 +1,40 @@
+import { Link } from '../../../src/link/Link';
+
+/**
+ * Here we display the component in its natural form, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Link/Design system/Default',
+  component: Link,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+const timestamp = new Date().getTime();
+const link = `#?time=${timestamp}`;
+
+export const Default = {
+  name: 'Default',
+  args: {
+    value: 'Default / Unvisited link',
+    to: link,
+    props: { target: '_self' },
+  },
+};
+
+export const Visited = {
+  name: 'Visited',
+  args: {
+    value: 'Visited link',
+    to: link,
+    props: { target: '_self' },
+  },
+};

stories/Link/design-system/MaterialTheme.stories.js

@@ -0,0 +1,64 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import { Link } from '../../../src/link/Link';
+import { LiveProvider, LiveEditor } from 'react-live';
+import style from '!raw-loader!../../themes/material.theme.css';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+
+/**
+ * This a theme showcases an appearance similar to Material UI can be achieved.
+ * If you copy paste this snippet inside your css file you'll get a material design style
+ */
+export default {
+  title: 'DCXLibrary/Typography/Link/Design system/Material',
+  component: Link,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/material.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-link', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+const timestamp = new Date().getTime();
+const link = `#?time=${timestamp}`;
+
+export const Default = {
+  name: 'Default',
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};
+
+export const Visited = {
+  name: 'Visited',
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};

stories/Link/design-system/Playground.stories.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/link.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { Link } from '../../../src/link/Link';
+
+export default {
+  title: 'DCXLibrary/Typography/Link/Design system',
+  component: Link,
+  decorators: [getStory => <TokensDecorator style={style}>{getStory()}</TokensDecorator>,],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+};
+
+const timestamp = new Date().getTime();
+const link = `#?time=${timestamp}`;
+
+export const Playground = {
+  name: 'Playground',
+  render: function () {
+    return <Link value="Link" to={link} props={{ target: '_self' }} />;
+  },
+};

stories/themes/dark.theme.css

@@ -74,4 +74,11 @@
   --dcx-color-text-heading-level_4: white;
   --dcx-color-text-heading-level_5: white;
   --dcx-color-text-heading-level_6: white;
-}
+}
+
+.dcx-link {
+  --dcx-color-text-link: darkorange;
+  --dcx-color-text-link-visited: #db7a03;
+  --dcx-color-text-link-active: #db7a03;
+  --dcx-color-text-link-hover: #db7a03;
+}