@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,223 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-<!-- 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

@@ -1,155 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-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

@@ -1,130 +0,0 @@
-// 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);
-    }
-  }
-}