@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/scss/components.scss

@@ -1,83 +0,0 @@
-//
-// Import component stylesheets located in components here. i.e.
-// @import '../components/base/dropdown/dropdown'
-//
-// ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
-@import '../components/experimental/duo/chat/duo_chat';
-@import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
-@import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
-@import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
-@import '../components/base/keyset_pagination/keyset_pagination';
-@import '../components/charts/gauge/gauge';
-@import '../components/base/token_selector/token_selector';
-@import '../components/base/card/card';
-@import '../components/shared_components/clear_icon_button/clear_icon_button';
-@import '../components/base/accordion/accordion_item';
-@import '../components/base/alert/alert';
-@import '../components/base/avatar/avatar';
-@import '../components/base/avatar_labeled/avatar_labeled';
-@import '../components/base/avatar_link/avatar_link';
-@import '../components/base/avatars_inline/avatars_inline';
-@import '../components/base/animated_icon/animated_icon';
-@import '../components/base/badge/badge';
-@import '../components/base/breadcrumb/breadcrumb';
-@import '../components/base/banner/banner';
-@import '../components/base/broadcast_message/broadcast_message';
-@import '../components/base/datepicker/datepicker';
-@import '../components/base/daterange_picker/daterange_picker';
-@import '../components/base/drawer/drawer';
-@import '../components/base/dropdown/dropdown';
-@import '../components/base/dropdown/dropdown_divider';
-@import '../components/base/dropdown/dropdown_section_header';
-@import '../components/base/dropdown/dropdown_item';
-@import '../components/base/dropdown/dropdown_text';
-@import '../components/base/filtered_search/filtered_search';
-@import '../components/base/filtered_search/filtered_search_suggestion';
-@import '../components/base/filtered_search/filtered_search_suggestion_list';
-@import '../components/base/filtered_search/filtered_search_term';
-@import '../components/base/filtered_search/filtered_search_token';
-@import '../components/base/filtered_search/filtered_search_token_segment';
-@import '../components/base/form/form_date/form_date';
-@import '../components/base/form/form_input/form_input';
-@import '../components/base/form/form_checkbox/form_checkbox';
-@import '../components/base/form/form_group/form_group';
-@import '../components/base/form/form_radio/form_radio';
-@import '../components/base/form/form_radio_group/form_radio_group';
-@import '../components/base/form/form_select/form_select';
-@import '../components/base/form/form_combobox/form_combobox';
-@import '../components/base/icon/icon';
-@import '../components/base/infinite_scroll/infinite_scroll';
-@import '../components/base/label/label';
-@import '../components/base/link/link';
-@import '../components/base/loading_icon/loading_icon';
-@import '../components/base/markdown/markdown';
-@import '../components/base/modal/modal';
-@import '../components/base/nav/nav';
-@import '../components/base/navbar/navbar';
-@import '../components/base/button/button';
-@import '../components/base/pagination/pagination';
-@import '../components/base/path/path';
-@import '../components/base/popover/popover';
-@import '../components/base/progress_bar/progress_bar';
-@import '../components/base/search_box_by_type/search_box_by_type';
-@import '../components/base/search_box_by_click/search_box_by_click';
-@import '../components/base/segmented_control/segmented_control';
-@import '../components/base/skeleton_loader/skeleton_loader';
-@import '../components/base/tabs/tabs/tabs';
-@import '../components/base/toast/toast';
-@import '../components/base/table/table';
-@import '../components/base/toggle/toggle';
-@import '../components/base/token/token';
-@import '../components/base/tooltip/tooltip';
-@import '../components/charts/heatmap/heatmap';
-@import '../components/charts/legend/legend';
-@import '../components/charts/series_label/series_label';
-@import '../components/charts/single_stat/single_stat';
-@import '../components/charts/tooltip/tooltip';
-@import '../components/shared_components/charts/tooltip_default_format';
-@import '../components/utilities/truncate/truncate';
-@import '../components/utilities/truncate_text/truncate_text';
-@import '../components/base/new_dropdowns/dropdown';
-@import '../components/base/new_dropdowns/dropdown_item';
-@import '../components/base/new_dropdowns/listbox/listbox';
-@import '../components/regions/empty_state/empty_state';

package/src/scss/fonts.scss

@@ -1,67 +0,0 @@
-/* -------------------------------------------------------
-GitLab Sans variable font.
-
-Usage:
-  html { font-family: 'GitLab Sans', sans-serif; }
-*/
-@font-face {
-  font-family: 'GitLab Sans';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: normal;
-  /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'GitLab Sans';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: italic;
-  /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
-}
-
-/* -------------------------------------------------------
-Monospaced font: GitLab Mono.
-
-Usage:
-  html { font-family: 'GitLab Mono', monospace; }
-*/
-@font-face {
-  font-family: 'GitLab Mono';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: normal;
-  src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'GitLab Mono';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: italic;
-  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
-}
-
-* {
-  font-synthesis: none;
-}

package/src/scss/functions.scss

@@ -1,63 +0,0 @@
-@use 'sass:math';
-
-/*
-* SASS preserves units in arithmetic operations. For example:
-* 12em * 0 = 0em. This function return the unit of a numeric value.
-*
-* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ
-*/
-@function extract-unit($number) {
-  @return $number * 0 + 1;
-}
-
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return math.div($number, extract-unit($number));
-  }
-
-  @return $number;
-}
-
-@function single-unit-rem($value, $font-size-base) {
-  @if (extract-unit($value) != 1px) {
-    @return $value;
-  }
-
-  $converted: math.div($value, $font-size-base);
-
-  @return strip-unit($converted) * 1rem;
-}
-
-@function multiple-units-rem($values, $font-size-base) {
-  $rem-values: ();
-
-  @each $value in $values {
-    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base));
-  }
-
-  @return $rem-values;
-}
-
-@function px-to-rem($px, $font-size-base: 16px) {
-  @if type-of($px) == 'number' {
-    @return single-unit-rem($px, $font-size-base);
-  } @else if type-of($px) == 'list' {
-    @return multiple-units-rem($px, $font-size-base);
-  } @else {
-    @return $px;
-  }
-}
-
-@function if-important($important) {
-  @return #{if($important, '!important', '')};
-}
-
-@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
-  $min-width: px-to-rem($min-width);
-  $max-width: px-to-rem($max-width);
-
-  $slope: math.div($max - $min, $max-width - $min-width);
-  $intersection: (-$min-width * $slope) + $min;
-
-  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
-}

package/src/scss/gitlab_ui.scss

@@ -1,19 +0,0 @@
-@import 'bootstrap';
-
-@import 'bootstrap_vue';
-
-// Design Tokens
-@import 'tokens';
-
-// Settings
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'utility-mixins/index';
-@import 'typescale/index';
-
-// Body
-@import 'body';
-
-// Components
-@import 'components';

package/src/scss/mixins.scss

@@ -1,262 +0,0 @@
-@mixin str-truncated($max-width: 82%) {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-  max-width: $max-width;
-}
-
-@mixin mask-chevron-down {
-  mask-image: url('#{$gl-icon-chevron-down}');
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: cover;
-}
-
-@mixin gl-fluid-font-size($min, $max) {
-  @include gl-responsive-property('font-size', $min, $max);
-}
-
-@mixin gl-fluid-line-height($min, $max) {
-  @include gl-responsive-property('line-height', $min, $max);
-}
-
-/**
-* Declares a property with a fluid value that decreases or
-* rises depending on the viewport’s size. The property type
-* should be numeric.
-*
-* Values are expected in rem units.
-* Fluid range: between 48rem (768px) – 75rem (1200px).
-*
-* @param $property Property name, i.e. line-height, font-size, width, height, etc.
-* @param $min Property value lower bound.
-* @param $max Property value upper bound.
-*/
-@mixin gl-responsive-property($property, $min, $max) {
-  #{$property}: clamp-between($min, $max);
-}
-
-/**
-* Helper function for :focus
-*
-* @param $size is deprecated and should not be used anymore
-*/
-@mixin gl-focus(
-  $size: null,
-  $color: false,
-  $important: false,
-  $inset: false,
-  $focus-ring: $focus-ring,
-  $outline: false,
-  $outline-offset: $outline-offset
-) {
-  @if $inset == true {
-    @if $color {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
-        inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
-        inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
-        $focus-ring-inset if-important($important);
-      outline: none if-important($important);
-      @media (forced-colors: active) {
-        outline: 2px solid LinkText if-important($important);
-      }
-    } @else if $outline == true {
-      outline: $focus-ring-outline if-important($important);
-      outline-offset: $outline-offset;
-    } @else {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
-        $focus-ring-inset if-important($important);
-      outline: none if-important($important);
-      @media (forced-colors: active) {
-        outline: 2px solid LinkText if-important($important);
-      }
-    }
-  } @else if $color {
-    box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
-    outline: none if-important($important);
-    @media (forced-colors: active) {
-      outline: 2px solid LinkText if-important($important);
-    }
-  } @else if $outline == true {
-    outline: $focus-ring-outline if-important($important);
-    outline-offset: $outline-offset;
-  } @else {
-    box-shadow: $focus-ring if-important($important);
-    outline: none if-important($important);
-    @media (forced-colors: active) {
-      outline: 2px solid LinkText if-important($important);
-    }
-  }
-}
-
-@mixin gl-bg-gradient-blur($direction, $color) {
-  background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
-}
-
-/**
-* Helper function for @media of at least the minimum
-* breakpoint width.
-*
-* @param $name Breakpoint name, such as `sm` or `md`.
-*/
-@mixin gl-media-breakpoint-up($name) {
-  $min: map-get($breakpoints, $name);
-  @if $min == null {
-    @error "#{$name} is not a valid breakpoint for this @media query.";
-  }
-  @if $min != 0 {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/**
-* Helper function for @media of at most the maximum
-* breakpoint width.
-*
-* Note: Before using, consider using a mobile-first
-* approach, and define @media for larger breakpoints
-* using `gl-media-breakpoint-up` while using this rule as
-* the starting point instead.
-*
-* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid
-*/
-@mixin gl-media-breakpoint-down($name) {
-  $max: map-get($breakpoints, $name);
-  @if ($max == null or $max == 0) {
-    @error "#{$name} is not a valid breakpoint for this @media query.";
-  }
-  // The maximum value is reduced by 0.02px to work around the limitations of
-  // `min-` and `max-` prefixes and with fractional viewport sizes.
-  // See: https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-  // Use 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-  // See https://bugs.webkit.org/show_bug.cgi?id=178261
-  $breakpoint-max-range-precision: 0.02px;
-
-  @media (max-width: $max - $breakpoint-max-range-precision) {
-    @content;
-  }
-}
-
-/**
-* Helper function to resolve font-size value from $gl-font-sizes and
-* $gl-font-sizes-fixed maps.
-*
-* @param $size Number font-size scale
-* @param $fixed Boolean toggle default and fixed font size scales
-*/
-@function get-font-size-variable($size, $fixed) {
-  @if $fixed == true {
-    @if map-has-key($gl-font-sizes-fixed, $size) {
-      @return map-get($gl-font-sizes-fixed, $size);
-    } @else {
-      @error "#{$size} is not a valid fixed font size property";
-      @return null;
-    }
-  } @else {
-    @if map-has-key($gl-font-sizes, $size) {
-      @return map-get($gl-font-sizes, $size);
-    } @else {
-      @error "#{$size} is not a valid font size property";
-      @return null;
-    }
-  }
-}
-
-/**
-* Defines default properties for heading typography based on font-size
-* scale value and default or fixed sizing.
-*
-* Note: overrides Bootstrap margin-top, other margin is determined by
-* individual context
-*
-* @param $size Number font-size scale
-* @param $fixed Boolean toggle default and fixed font size scales
-*/
-@mixin gl-heading-scale($size, $fixed: false) {
-  font-weight: $gl-font-weight-heading;
-  margin-top: 0; // override bootstrap reset in GitLab
-  font-size: get-font-size-variable($size, $fixed);
-
-  // Larger headings have reduced letter spacing
-  @if ($size <= 500) {
-    letter-spacing: $gl-letter-spacing-heading;
-  } @else {
-    letter-spacing: $gl-letter-spacing-heading-reduced;
-  }
-
-  // Display heading has different line height
-  @if ($size == 800) {
-    line-height: $gl-line-height-heading-display;
-  } @else {
-    line-height: $gl-line-height-heading;
-  }
-}
-
-@mixin gl-action-neutral-colors {
-  color: var(--gl-action-neutral-foreground-color-default);
-  background-color: var(--gl-action-neutral-background-color-default);
-  border-color: var(--gl-action-neutral-border-color-default);
-
-  &:hover {
-    color: var(--gl-action-neutral-foreground-color-hover);
-    background-color: var(--gl-action-neutral-background-color-hover);
-    border-color: var(--gl-action-neutral-border-color-hover);
-  }
-
-  &:focus {
-    color: var(--gl-action-neutral-foreground-color-focus);
-    background-color: var(--gl-action-neutral-background-color-focus);
-    border-color: var(--gl-action-neutral-border-color-focus);
-  }
-
-  &:active {
-    color: var(--gl-action-neutral-foreground-color-active);
-    background-color: var(--gl-action-neutral-background-color-active);
-    border-color: var(--gl-action-neutral-border-color-active);
-  }
-}
-
-@mixin gl-prefers-reduced-motion-transition {
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-    transition-delay: 0ms !important;
-  }
-}
-
-@mixin gl-prefers-reduced-motion-animation {
-  @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    animation-delay: 0ms !important;
-  }
-}
-
-@mixin gl-action-selected-colors {
-  color: var(--gl-action-selected-foreground-color-default);
-  background-color: var(--gl-action-selected-background-color-default);
-  border-color: var(--gl-action-selected-border-color-default);
-
-  &:hover {
-    color: var(--gl-action-selected-foreground-color-hover);
-    background-color: var(--gl-action-selected-background-color-hover);
-    border-color: var(--gl-action-selected-border-color-hover);
-  }
-
-  &:focus {
-    color: var(--gl-action-selected-foreground-color-focus);
-    background-color: var(--gl-action-selected-background-color-focus);
-    border-color: var(--gl-action-selected-border-color-focus);
-  }
-
-  &:active {
-    color: var(--gl-action-selected-foreground-color-active);
-    background-color: var(--gl-action-selected-background-color-active);
-    border-color: var(--gl-action-selected-border-color-active);
-  }
-}

package/src/scss/storybook.scss

@@ -1,43 +0,0 @@
-// Enables feature flag for GlButton border migration
-// to see in Storybook the expected new styles
-$feature-button-border: true;
-
-@import 'tokens';
-
-@import 'functions';
-@import 'variables';
-
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-
-@import 'bootstrap_vue';
-
-@import 'mixins';
-@import 'utility-mixins/index';
-
-@import 'fonts';
-
-@import 'body';
-@import 'components';
-
-@import 'storybook_dark_mode';
-
-/**
- * Custom padding for docs pages. This improves the integration in Pajamas pages.
- */
-.sbdocs-wrapper {
-  padding-top: $gl-spacing-scale-2 !important;
-  padding-bottom: 0 !important;
-}
-
-.bootstrap-vue-docs {
-  @import "../vendor/bootstrap-vue/docs/assets/css/docs.min";
-  @import "../vendor/bootstrap-vue/docs/assets/scss/styles";
-}
-
-// This imports the tailwind.css file.
-// Note that adding `.css` here would break the inline import.
-// These utilities are imported last, because that's
-// what we do in GitLab as well.
-@import 'tailwind';

package/src/scss/storybook_dark_mode.scss

@@ -1,21 +0,0 @@
-@import 'variables';
-
-// conditional overrides for dark mode for use in storybook.
-// Because we only use application.css from gitlab (and not
-// application_dark), we need to override some base rules so
-// that we can more easily test components in dark mode
-
-// This is because dark mode in gitlab currently depends on
-// overriding SCSS variables, but we want gitlab-ui dark mode
-// to use Custom Properties instead
-
-.gl-dark {
-  // Note that we are assigning variables with different values due to the way GitLab inverts variables in dark mode.
-  // e.g. text color is usually $gray-900, but in dark mode $gray-900 variable gets inverted to $gray-50
-  --gl-text-color: #{$gray-50};
-  --white: #{$gray-900}; // define mapping between the colours in dark mode. I have used the values from GitLab for consistency: https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/stylesheets/themes/_dark.scss
-  --gray-10: #{$gray-950};
-  --gray-600: #{$gray-300};
-
-  color-scheme: dark;
-}

package/src/scss/tokens.scss

@@ -1,2 +0,0 @@
-@import '../tokens/build/css/tokens';
-@import '../tokens/build/css/tokens.dark';

package/src/scss/typescale/_index.scss

@@ -1,103 +0,0 @@
-@mixin gl-typescale-ui($selector: 'body') {
-  #{$selector} {
-    @apply gl-text-base;
-    @apply gl-text-gray-900;
-    @apply gl-font-regular;
-    @apply gl-font-normal;
-    @apply gl-leading-normal;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h-display,
-  .gl-h1,
-  .gl-h2,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @apply gl-font-bold;
-    @apply gl-mt-0;
-    @apply gl-mb-0;
-  }
-
-  .h-display {
-    @include gl-fluid-font-size($min: $gl-font-size-h-display, $max: $gl-font-size-h-display-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
-  }
-
-  h1,
-  .gl-h1 {
-    @include gl-fluid-font-size($min: $gl-font-size-h1, $max: $gl-font-size-h1-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
-  }
-
-  h2,
-  .gl-h2 {
-    @include gl-fluid-font-size($min: $gl-font-size-h2, $max: $gl-font-size-h2-xl);
-    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
-  }
-
-  h3,
-  .gl-h3 {
-    @apply gl-text-lg;
-    @apply gl-leading-20;
-  }
-
-  h4,
-  .gl-h4 {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-  }
-
-  h5,
-  .gl-h5,
-  h6,
-  .gl-h6 {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-    @apply gl-text-gray-700;
-  }
-
-  p,
-  .gl-paragraph {
-    @apply gl-text-base;
-    @apply gl-leading-20;
-    @apply gl-mt-0;
-    @apply gl-mb-0;
-
-    + p,
-    + .gl-paragraph {
-      @apply gl-mt-5;
-    }
-
-    &.lg {
-      @apply gl-leading-24;
-    }
-  }
-
-  .sm {
-    @apply gl-text-sm;
-  }
-
-  .lg {
-    @apply gl-text-lg;
-  }
-
-  .monospace {
-    @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;
-  }
-}