From 7f391e7b1d4e1e9dd8fc1d632d93227e113920c1 Mon Sep 17 00:00:00 2001
From: Alaa Eddine <70238665+AlaaEddine20@users.noreply.github.com>
Date: Thu, 16 Nov 2023 12:49:45 +0100
Subject: [PATCH 1/2] adds meta description for SEO (#574)

---
 .storybook/manager-head.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 39d7e6dd..7daee197 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -2,6 +2,7 @@
   href="https://www.capgemini.com/wp-content/themes/capgemini-komposite/assets/images/favicon.ico">
 <link rel="icon" type="image/png" href="/storybook.png" sizes="192x192">
 <!-- TODO-DS: we'll remove this one when we'll decide to release the design tokens-->
+<meta name="description" content="react agnostic library" key="desc" />
 <script defer>
   if (location.hostname !== 'localhost') {
     const $hideDesignSystemFromSidebar = document.createElement('style');

From f191be417d86a5cb9b1ddeedc84c3d5ea5841192 Mon Sep 17 00:00:00 2001
From: jgonza16 <93665374+jgonza16@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:43:49 +0100
Subject: [PATCH 2/2] feat: add abbreviate design system

Closes #530
---
 src/design-system/abbreviate.css              | 12 ++++
 src/design-system/index.css                   |  1 +
 src/design-system/tokens.json                 |  7 +-
 .../design-system/AccessibleTheme.stories.js  | 59 ++++++++++++++++
 .../design-system/DarkTheme.stories.js        | 69 +++++++++++++++++++
 .../design-system/Default.stories.js          | 33 +++++++++
 .../design-system/MaterialTheme.stories.js    | 61 ++++++++++++++++
 .../design-system/Playground.stories.js       | 30 ++++++++
 stories/themes/accessible.theme.css           |  5 ++
 stories/themes/dark.theme.css                 |  4 ++
 stories/themes/material.theme.css             |  5 ++
 11 files changed, 284 insertions(+), 2 deletions(-)
 create mode 100644 src/design-system/abbreviate.css
 create mode 100644 stories/Abbreviate/design-system/AccessibleTheme.stories.js
 create mode 100644 stories/Abbreviate/design-system/DarkTheme.stories.js
 create mode 100644 stories/Abbreviate/design-system/Default.stories.js
 create mode 100644 stories/Abbreviate/design-system/MaterialTheme.stories.js
 create mode 100644 stories/Abbreviate/design-system/Playground.stories.js

diff --git a/src/design-system/abbreviate.css b/src/design-system/abbreviate.css
new file mode 100644
index 00000000..f54f3d1d
--- /dev/null
+++ b/src/design-system/abbreviate.css
@@ -0,0 +1,12 @@
+.dcx-abbreviate {
+  background: token('color-background-highlight_body');
+  border-radius: token('border-radius-abbreviate');
+  color: token('color-text-body');
+  font-family: token('font-family-body');
+  font-size: token('font-size-body');
+  font-weight: token('font-weight-body');
+  margin: 0;
+  padding: token('spacing-y-abbreviate') token('spacing-x-abbreviate');
+  text-decoration: none;
+  cursor: help;
+}
diff --git a/src/design-system/index.css b/src/design-system/index.css
index 9f1461a8..9654c861 100644
--- a/src/design-system/index.css
+++ b/src/design-system/index.css
@@ -9,4 +9,5 @@
 @import './insert-text.css';
 @import './heading.css';
 @import './highlight.css';
+@import './abbreviate.css';
 @import './keyboard-input.css';
diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json
index 20c23e5f..91373fc8 100644
--- a/src/design-system/tokens.json
+++ b/src/design-system/tokens.json
@@ -17,6 +17,7 @@
   "border-radius-action": "6px",
   "border-radius-formcontrol": "4px",
   "border-radius-formcontrol-floating": "4px",
+  "border-radius-abbreviate": "3px",
   "border-style-action": "solid",
   "border-width-action": "1px",
   "box-shadow-action": "0px 8px 15px rgba(0, 0, 0, 0.1)",
@@ -131,5 +132,7 @@
   "spacing-x-formcontrol-floating-filled": "15px",
   "spacing-y-action": "10px",
   "spacing-y-formcontrol": "15px",
-  "spacing-y-formcontrol-floating": "30px"
-}
\ No newline at end of file
+  "spacing-y-formcontrol-floating": "30px",
+  "spacing-y-abbreviate": "0px",
+  "spacing-x-abbreviate": "0px"
+}
diff --git a/stories/Abbreviate/design-system/AccessibleTheme.stories.js b/stories/Abbreviate/design-system/AccessibleTheme.stories.js
new file mode 100644
index 00000000..b3efdfb4
--- /dev/null
+++ b/stories/Abbreviate/design-system/AccessibleTheme.stories.js
@@ -0,0 +1,59 @@
+import { Abbreviate } from '../../../src/abbreviate/Abbreviate';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
+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/Abbreviate/Design system/Accessible',
+  component: Abbreviate,
+  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-abbreviate', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    title: 'As soon as possible',
+    value: 'ASAP',
+  },
+  render: ({ title, value }) => (
+    <Paragraph>
+      Sorry, i call you <Abbreviate {...{ title, value }} />
+    </Paragraph>
+  ),
+};
diff --git a/stories/Abbreviate/design-system/DarkTheme.stories.js b/stories/Abbreviate/design-system/DarkTheme.stories.js
new file mode 100644
index 00000000..74b3534b
--- /dev/null
+++ b/stories/Abbreviate/design-system/DarkTheme.stories.js
@@ -0,0 +1,69 @@
+import { Abbreviate } from '../../../src/abbreviate/Abbreviate';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+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/Abbreviate/Design system/Dark',
+  component: Abbreviate,
+  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-abbreviate', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  args: {
+    title: 'As soon as possible',
+    value: 'ASAP',
+  },
+  render: ({ title, value }) => (
+    <Paragraph>
+      Sorry, i call you <Abbreviate {...{ title, value }} />
+    </Paragraph>
+  ),
+};
diff --git a/stories/Abbreviate/design-system/Default.stories.js b/stories/Abbreviate/design-system/Default.stories.js
new file mode 100644
index 00000000..bc9016dc
--- /dev/null
+++ b/stories/Abbreviate/design-system/Default.stories.js
@@ -0,0 +1,33 @@
+import { Abbreviate } from '../../../src/abbreviate/Abbreviate';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
+/**
+ * Here we display the component in its natural abbreviate, importing only the base Design System styles.
+ */
+export default {
+  title: 'DCXLibrary/Typography/Abbreviate/Design system/Default',
+  component: Abbreviate,
+  decorators: [
+    getStory => {
+      require('../../../dist/design-system/index.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    title: 'As soon as possible',
+    value: 'ASAP',
+  },
+  render: ({ title, value }) => (
+    <Paragraph>
+      Sorry, i call you <Abbreviate {...{ title, value }} />
+    </Paragraph>
+  ),
+};
diff --git a/stories/Abbreviate/design-system/MaterialTheme.stories.js b/stories/Abbreviate/design-system/MaterialTheme.stories.js
new file mode 100644
index 00000000..f883833f
--- /dev/null
+++ b/stories/Abbreviate/design-system/MaterialTheme.stories.js
@@ -0,0 +1,61 @@
+import { Abbreviate } from '../../../src/abbreviate/Abbreviate';
+import { LiveProvider, LiveEditor } from 'react-live';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/material.theme.css';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
+
+/**
+ * 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/Abbreviate/Design system/Material',
+  component: Abbreviate,
+  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-abbreviate', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const Default = {
+  name: 'Default',
+  args: {
+    title: 'As soon as possible',
+    value: 'ASAP',
+  },
+  render: ({ title, value }) => (
+    <Paragraph>
+      Sorry, i call you <Abbreviate {...{ title, value }} />
+    </Paragraph>
+  ),
+};
diff --git a/stories/Abbreviate/design-system/Playground.stories.js b/stories/Abbreviate/design-system/Playground.stories.js
new file mode 100644
index 00000000..1d82007f
--- /dev/null
+++ b/stories/Abbreviate/design-system/Playground.stories.js
@@ -0,0 +1,30 @@
+/* eslint-disable import/no-webpack-loader-syntax */
+import style from '!raw-loader!../../../dist/design-system/abbreviate.css';
+import TokensDecorator from '../../../core/storybook/TokensDecorator';
+import { Abbreviate } from '../../../src/abbreviate/Abbreviate';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
+
+export default {
+  title: 'DCXLibrary/Typography/Abbreviate/Design system',
+  component: Abbreviate,
+  decorators: [
+    getStory => <TokensDecorator style={style}>{getStory()}</TokensDecorator>,
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+};
+
+export const Playground = {
+  name: 'Playground',
+  args: {
+    title: 'As soon as possible',
+    value: 'ASAP',
+  },
+  render: ({ title, value }) => (
+    <Paragraph>
+      Sorry, i call you <Abbreviate {...{ title, value }} />
+    </Paragraph>
+  ),
+};
diff --git a/stories/themes/accessible.theme.css b/stories/themes/accessible.theme.css
index ca19c965..b8783edb 100644
--- a/stories/themes/accessible.theme.css
+++ b/stories/themes/accessible.theme.css
@@ -23,3 +23,8 @@
   --dcx-color-text-body: #000;
   --dcx-color-marker: #000;
 }
+
+.dcx-abbreviate {
+  --dcx-spacing-y-abbreviate: 5px;
+  --dcx-spacing-x-abbreviate: 5px;
+}
\ No newline at end of file
diff --git a/stories/themes/dark.theme.css b/stories/themes/dark.theme.css
index 29f781f8..413a01dd 100644
--- a/stories/themes/dark.theme.css
+++ b/stories/themes/dark.theme.css
@@ -76,6 +76,10 @@
   --dcx-color-text-heading-level_6: white;
 }
 
+.dcx-abbreviate {
+  --dcx-color-background-highlight_body: #666;
+}
+
 .dcx-link {
   --dcx-color-text-link: darkorange;
   --dcx-color-text-link-visited: #db7a03;
diff --git a/stories/themes/material.theme.css b/stories/themes/material.theme.css
index bff09d5a..c114154e 100644
--- a/stories/themes/material.theme.css
+++ b/stories/themes/material.theme.css
@@ -19,3 +19,8 @@
   --dcx-color-text-body: rgba(0, 0, 0, 0.6);
   --dcx-color-marker: rgba(0, 0, 0, 0.6);
 }
+
+
+.dcx-abbreviate {
+  --dcx-border-radius-abbreviate: 8px;
+}
\ No newline at end of file