@gitlab/duo-ui 0.1.0

package/src/components/base/markdown/markdown.scss

@@ -0,0 +1,223 @@
+.gl-markdown {
+  @apply gl-text-lg;
+  @apply gl-leading-24;
+  color: $gl-text-color;
+  @apply gl-font-regular;
+  @apply gl-font-normal;
+
+  :first-child {
+    @apply gl-mt-0;
+  }
+
+  h1,
+  .gl-h1 {
+    @apply gl-heading-1;
+    @apply gl-mt-7;
+  }
+
+  h2,
+  .gl-h2 {
+    @apply gl-heading-2;
+    @apply gl-mt-6;
+  }
+
+  h3,
+  .gl-h3 {
+    @apply gl-heading-3;
+    @apply gl-mt-6;
+  }
+
+  h4,
+  .gl-h4 {
+    @apply gl-heading-4;
+    @apply gl-mt-5;
+  }
+
+  h5,
+  .gl-h5 {
+    @apply gl-heading-5;
+    @apply gl-mt-5;
+  }
+
+  h6,
+  .gl-h6 {
+    @apply gl-heading-6;
+    @apply gl-mt-5;
+  }
+
+  p,
+  .gl-paragraph {
+    @apply gl-mt-0;
+    @apply gl-mb-0;
+
+    + p,
+    + .gl-paragraph {
+      @apply gl-mt-5;
+    }
+
+    &.sm {
+      @include gl-font-size-markdown-sm;
+      @apply gl-leading-20;
+    }
+  }
+
+  .sm {
+    @include gl-font-size-markdown-sm;
+    @apply gl-leading-20;
+  }
+
+  .monospace,
+  code {
+    @apply gl-font-monospace;
+  }
+
+  blockquote {
+    @apply gl-text-gray-700;
+    @apply gl-py-3;
+    @apply gl-pl-6;
+    @apply gl-my-3;
+    @apply gl-mx-0;
+    @include gl-inset-border-l-4-gray-100;
+  }
+
+  .idiff {
+    @apply gl-rounded-base;
+    @apply gl-inline-flex;
+    @apply gl-px-2;
+  }
+
+  .deletion {
+    @apply gl-bg-red-100;
+  }
+
+  .addition {
+    @apply gl-bg-green-100;
+  }
+
+  code {
+    @apply gl-rounded-base;
+    @apply gl-bg-gray-50;
+    @apply gl-text-gray-950;
+    @apply gl-px-2;
+    @apply gl-py-1;
+  }
+
+  pre {
+    @apply gl-rounded-base;
+    @apply gl-py-3;
+    @apply gl-px-4;
+    @include gl-inset-border-1-gray-100;
+    @apply gl-my-7;
+    @apply gl-overflow-auto;
+
+    code {
+      @apply gl-bg-white;
+      @apply gl-rounded-none;
+      @apply gl-text-gray-900;
+      @apply gl-p-0;
+    }
+  }
+
+  .audio-container {
+    @apply gl-inline-flex;
+    @apply gl-flex-col;
+    @apply gl-w-full;
+
+    audio {
+      @apply gl-w-full;
+    }
+
+    a {
+      @apply gl-mt-3;
+
+      &::before {
+        @apply gl-mr-2;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        content: '📎';
+      }
+    }
+  }
+
+  table {
+    @apply gl-my-7;
+
+    th,
+    td {
+      @apply gl-px-3;
+      @apply gl-py-4;
+      @include gl-inset-border-b-1-gray-100;
+      @apply gl-align-top;
+    }
+
+    th {
+      @include gl-inset-border-y-1-gray-100;
+      @apply gl-font-bold;
+    }
+
+    thead {
+      @apply gl-bg-gray-50;
+    }
+
+    tr:nth-child(even) {
+      @apply gl-bg-gray-10;
+    }
+  }
+}
+
+.gl-compact-markdown {
+  @apply gl-text-base;
+  @apply gl-leading-20;
+
+  h1,
+  .gl-h1 {
+    @apply gl-heading-1-fixed;
+    @apply gl-mt-7;
+  }
+
+  h2,
+  .gl-h2 {
+    @apply gl-heading-2-fixed;
+    @apply gl-mt-6;
+  }
+
+  h3,
+  .gl-h3 {
+    @apply gl-heading-3-fixed;
+    @apply gl-mt-6;
+  }
+
+  h4,
+  .gl-h4 {
+    @apply gl-heading-4-fixed;
+    @apply gl-mt-5;
+  }
+
+  h5,
+  .gl-h5 {
+    @apply gl-heading-5-fixed;
+    @apply gl-mt-5;
+  }
+
+  h6,
+  .gl-h6 {
+    @apply gl-heading-6-fixed;
+    @apply gl-mt-5;
+  }
+
+  .sm {
+    @apply gl-text-sm;
+  }
+
+  .monospace,
+  code {
+    @apply gl-font-monospace;
+  }
+
+  table {
+    th,
+    td {
+      @apply gl-py-3;
+    }
+  }
+}

package/src/components/base/markdown/markdown.vue

@@ -0,0 +1,18 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+export default {
+  name: 'GlMarkdown',
+  props: {
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+<template>
+  <div :class="['gl-markdown', { 'gl-compact-markdown': compact }]">
+    <slot></slot>
+  </div>
+</template>

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -0,0 +1,155 @@
+<h1>MD Doc h1 • GitLab uses "GitLab Flavored Markdown" (GFM)</h1>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<p class="sm">
+  MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+  Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+  following areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<p class="monospace">UI Monospace</p>
+<p class="monospace sm">UI Small Monospace</p>
+<h2>MD Doc h2 • GitLab uses "GitLab Flavored Markdown" (GFM)</h2>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<h3>MD Doc h3 • GitLab uses "GitLab Flavored Markdown" (GFM)</h3>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<h4>MD Doc h4 • GitLab uses "GitLab Flavored Markdown" (GFM)</h4>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<h5>MD Doc h5 • GitLab uses "GitLab Flavored Markdown" (GFM)</h5>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+<h6>MD Doc h6 • GitLab uses "GitLab Flavored Markdown" (GFM)</h6>
+<p>
+  MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown
+  in a few significant ways to add some useful functionality. You can use GFM in the following
+  areas: comments, issues, merge requests, milestones, snippets and more.
+</p>
+
+<table>
+  <thead>
+    <tr>
+      <th>Widget</th>
+      <th>Wording</th>
+      <th>Proposed</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Test summary</td>
+      <td>Test summary contained 3 failed, 1 fixed test result out of 15 total tests</td>
+      <td>
+        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need
+        to be updated?
+      </td>
+    </tr>
+    <tr>
+      <td>Browser performance</td>
+      <td>Browser performance test metrics: 7 changes</td>
+      <td>Browser performance test metrics detected 7 changes</td>
+    </tr>
+    <tr>
+      <td>Load performance</td>
+      <td>Load performance test metrics detected 4 changes</td>
+      <td>✅</td>
+    </tr>
+  </tbody>
+</table>
+
+<blockquote>
+  <p>
+    MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard
+    Markdown in a few significant ways to add some useful functionality. You can use GFM in the
+    following areas: comments, issues, merge requests, milestones, snippets and more.
+  </p>
+</blockquote>
+<blockquote>
+  <ul>
+    <li>Blockquote list item 1</li>
+    <li>Blockquote list item 2</li>
+  </ul>
+</blockquote>
+<blockquote>
+  <table>
+    <thead>
+      <tr>
+        <th>header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cell</td>
+      </tr>
+    </tbody>
+  </table>
+</blockquote>
+<blockquote>
+  <blockquote>
+    <p>Nested blockquote</p>
+  </blockquote>
+</blockquote>
+<p>
+  This is a paragraph with two types inline diff <span class="idiff addition">addition</span> and
+  <span class="idiff deletion">deletion</span>
+</p>
+<p>This block implements the "GitLab Flavored Markdown" <code>Code span</code> styles.</p>
+
+<p>
+  This is an audio file
+  <span class="media-container audio-container">
+    <audio
+      src="file.mp3"
+      controls="true"
+      data-setup="{}"
+      data-title="file.mp3"
+      data-canonical-src="file.mp3"
+      class="gfm"
+    ></audio>
+    <a
+      href="file.mp3"
+      target="_blank"
+      rel="noopener noreferrer"
+      title="Download file.mp3"
+      data-canonical-src="file.mp3"
+      data-link="true"
+      class="gfm"
+      >file.mp3</a
+    >
+  </span>
+</p>
+<p>Code block</p>
+<pre class="code"><code>pre {
+  @apply gl-py-4;
+  @apply gl-px-6;
+
+  code {
+    @apply gl-bg-white;
+    @apply gl-rounded-none;
+    @apply gl-text-gray-900;
+    @apply gl-px-0;
+    @apply gl-py-0;
+  }
+}
+</code></pre>
+<p>Code block with long lines scrolls horizontally</p>
+<pre
+  class="code"
+><code>MD Doc Small Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
+significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge requests, milestones, snippets and more.
+</code></pre>

package/src/components/base/modal/modal.md

@@ -0,0 +1,30 @@
+Modals are used to reveal critical information, show information without losing context, or when the
+system requires a user response. Modals can also fragment a complex workflow into simpler steps and
+should serve a single purpose dedicated to completing the user’s task.
+
+## VModel
+
+You can use the `v-model` directive to control the modal’s visibility. The `v-model`
+directive interfaces with the `visible` property and the `@change` event.
+
+## Deprecation Warning
+
+We are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the
+`modal-footer` slot content is populated. This is in order to align this component with the design
+system.
+
+The `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and
+`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will
+behave in the modals footer. The props receive an object as such:
+
+```js
+{
+  text: 'Save Changes',
+  attributes: {
+    variant: 'confirm',
+    disabled: this.someState,
+    class: 'some-class',
+    ...
+  }
+}
+```

package/src/components/base/modal/modal.scss

@@ -0,0 +1,130 @@
+// variables
+$modal-body-height: 80px;
+$modal-body-line-height: 1.5;
+$modal-box-shadow: 0 4px 16px $t-gray-a-24;
+
+// mixins
+@mixin gl-tmp-modal-btn-group-ml {
+  margin-left: -1px;
+}
+
+body.modal-open {
+  @apply gl-overflow-hidden;
+}
+
+.gl-modal {
+  .modal-dialog-scrollable {
+    @include media-breakpoint-up(sm) {
+      max-height: calc(100% - #{$gl-spacing-scale-11 * 2});
+    }
+  }
+
+  .modal-sm {
+    max-width: $gl-modal-small-width;
+  }
+
+  .modal-md {
+    max-width: $gl-modal-medium-width;
+  }
+
+  .modal-lg {
+    max-width: $gl-modal-large-width;
+  }
+
+  .modal-xl {
+    max-width: 98%;
+  }
+
+  .modal-content {
+    @apply gl-rounded-base;
+    @apply gl-border-0;
+    box-shadow: $modal-box-shadow;
+    background-color: var(--gl-background-color-overlap);
+    color: var(--gl-text-color-default);
+
+    > :first-child {
+      @apply gl-rounded-tl-base;
+      @apply gl-rounded-tr-base;
+    }
+
+    > :last-child {
+      @apply gl-rounded-bl-base;
+      @apply gl-rounded-br-base;
+    }
+  }
+
+  .modal-header {
+    @apply gl-pb-3;
+    @apply gl-border-none;
+
+    .modal-title {
+      @apply gl-heading-scale-500;
+      color: var(--gl-text-color-heading);
+    }
+  }
+
+  .modal-body {
+    min-height: $modal-body-height;
+    line-height: $modal-body-line-height;
+    position: relative;
+    @apply gl-p-5;
+    @apply gl-py-3;
+    @apply gl-text-left;
+    @apply gl-whitespace-normal;
+    @apply gl-text-base;
+    @apply gl-leading-20;
+  }
+
+  .modal-footer {
+    @apply gl-flex;
+    @apply gl-flex-row;
+    @apply gl-p-5;
+    @apply gl-pt-3;
+    @apply gl-border-none;
+
+    .btn {
+      @apply gl-m-0;
+    }
+
+    .btn + .btn:not(.dropdown-toggle-split),
+    .btn + .btn-group,
+    .btn-group + .btn {
+      @apply gl-ml-3;
+    }
+
+    .btn-group .btn + .btn {
+      @include gl-tmp-modal-btn-group-ml;
+    }
+
+    @include media-breakpoint-down(xs) {
+      @apply gl-flex-col;
+
+      .btn + .btn:not(.dropdown-toggle-split),
+      .btn + .btn-group,
+      .btn-group + .btn {
+        @apply gl-ml-0;
+        @apply gl-mt-3;
+      }
+
+      .btn-group .btn + .btn {
+        @include gl-tmp-modal-btn-group-ml;
+        @apply gl-mt-0;
+      }
+    }
+  }
+
+  ~ .modal-backdrop {
+    background-color: var(--gl-background-color-overlay);
+    opacity: 1;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .modal-dialog {
+      @apply gl-mx-auto;
+      @apply gl-my-0;
+      @apply gl-flex;
+      @apply gl-items-center;
+      min-height: calc(100% - 1rem);
+    }
+  }
+}