@gitlab/ui 80.13.1 → 80.14.0

package/src/tokens/build/json/tokens.dark.json

@@ -1,4 +1,96 @@
 {
+  "background": {
+    "color": {
+      "default": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for the default background color.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "comment": "Used for the default background color."
+        },
+        "name": "BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used to slightly differentiate the background from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to slightly differentiate the background from the default."
+        },
+        "name": "BACKGROUND_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used to make the background easily stand out from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used to make the background easily stand out from the default."
+        },
+        "name": "BACKGROUND_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#333238",
+        "$type": "color",
+        "comment": "Used to identify a disabled section.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to identify a disabled section."
+        },
+        "name": "BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "disabled"
+        ]
+      }
+    }
+  },
   "color": {
     "blue": {
       "50": {

package/src/tokens/build/json/tokens.json

@@ -1,4 +1,96 @@
 {
+  "background": {
+    "color": {
+      "default": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the default background color.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.950}"
+          },
+          "$type": "color",
+          "comment": "Used for the default background color."
+        },
+        "name": "BACKGROUND_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#fbfafd",
+        "$type": "color",
+        "comment": "Used to slightly differentiate the background from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to slightly differentiate the background from the default."
+        },
+        "name": "BACKGROUND_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used to make the background easily stand out from the default.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.800}"
+          },
+          "$type": "color",
+          "comment": "Used to make the background easily stand out from the default."
+        },
+        "name": "BACKGROUND_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "strong"
+        ]
+      },
+      "disabled": {
+        "value": "#fbfafd",
+        "$type": "color",
+        "comment": "Used to identify a disabled section.",
+        "filePath": "src/tokens/background.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.10}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "comment": "Used to identify a disabled section."
+        },
+        "name": "BACKGROUND_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "background",
+          "color",
+          "disabled"
+        ]
+      }
+    }
+  },
   "color": {
     "blue": {
       "50": {

package/src/tokens/build/scss/_tokens.dark.scss

@@ -312,3 +312,7 @@ $gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level
 $gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.
+$gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
+$gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
+$gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
+$gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.

package/src/tokens/build/scss/_tokens.scss

@@ -312,3 +312,7 @@ $gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings lev
 $gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.
+$gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
+$gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
+$gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
+$gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -3,6 +3,10 @@
  * Do not edit directly
  */
 
+$gl-background-color-default: var(--gl-background-color-default);
+$gl-background-color-subtle: var(--gl-background-color-subtle);
+$gl-background-color-strong: var(--gl-background-color-strong);
+$gl-background-color-disabled: var(--gl-background-color-disabled);
 $gl-color-blue-50: var(--gl-color-blue-50);
 $gl-color-blue-100: var(--gl-color-blue-100);
 $gl-color-blue-200: var(--gl-color-blue-200);

package/src/tokens/build/tailwind/tokens.cjs

@@ -214,6 +214,16 @@ const textColors = {
   disabled:
     'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
+const backgroundColors = {
+  default:
+    'var(--gl-background-color-default, var(--gl-color-neutral-0, #fff))',
+  subtle:
+    'var(--gl-background-color-subtle, var(--gl-color-neutral-10, #fbfafd))',
+  strong:
+    'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
+  disabled:
+    'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
+};
 
 const colors = {
   transparent: 'transparent',
@@ -224,6 +234,11 @@ const colors = {
   ...dataVizColors,
 };
 
+const backgroundColor = {
+  ...colors,
+  ...backgroundColors,
+};
+
 const textColor = {
   ...colors,
   ...textColors,
@@ -234,5 +249,6 @@ const textColor = {
 
 module.exports = {
   colors,
+  backgroundColor,
   textColor,
 };

package/tailwind.defaults.js

@@ -1,4 +1,4 @@
-const { colors, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
+const { colors, backgroundColor, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const gridSize = 0.5; // rem
 const spacing = {
@@ -48,6 +48,7 @@ module.exports = {
       xl: '1200px',
     },
     colors,
+    backgroundColor,
     spacing,
     fontSize: {
       xs: '0.625rem',

package/src/components/base/accordion/accordion.spec.js

@@ -1,58 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordion', () => {
-  let wrapper;
-
-  const createComponent = ({ headerLevel = 3, autoCollapse = false } = {}) => {
-    wrapper = mount(
-      Vue.extend({
-        components: { GlAccordion, GlAccordionItem },
-        data() {
-          return { headerLevel, autoCollapse };
-        },
-        // eslint-disable-next-line @gitlab/no-runtime-template-compiler
-        template: `
-          <gl-accordion :header-level="headerLevel" :auto-collapse="autoCollapse">
-            <gl-accordion-item title="Item 1">
-              Foo
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 2">
-              Bar
-            </gl-accordion-item>
-            <gl-accordion-item title="Item 3">
-              Bin
-            </gl-accordion-item>
-          </gl-accordion>`,
-      })
-    );
-  };
-
-  const findAccordionItems = () => wrapper.findAllComponents(GlAccordionItem);
-
-  it('does not populate the accordion prop by default', () => {
-    createComponent();
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should not be set
-    expect(accordionSetId).toBeUndefined();
-  });
-
-  it('populates the accordion prop when autoCollapse is true', () => {
-    createComponent({ autoCollapse: true });
-    const accordionSetId = findAccordionItems().at(0).vm.accordion;
-
-    // accordion should be set
-    expect(accordionSetId).not.toBeUndefined();
-
-    // accordion should be the same across glAccordionItem children
-    expect(findAccordionItems().at(1).vm.accordion).toEqual(accordionSetId);
-  });
-
-  it('passes a default headerLevel to children', () => {
-    createComponent({ headerLevel: 4 });
-    expect(wrapper.findAll('h4')).toHaveLength(findAccordionItems().length);
-  });
-});

package/src/components/base/accordion/accordion.stories.js

@@ -1,59 +0,0 @@
-import readme from './accordion.md';
-import GlAccordion from './accordion.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion :auto-collapse="autoCollapse" :header-level="headerLevel">
-      <gl-accordion-item title="Item 1" :header-level="headerLevel">
-        Each accordion can be expanded or collapsed independently of others.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 2" :header-level="headerLevel" :visible="true">
-        If you want to have an accordion item to be initially visible, please see
-        <code>Initially Expanded</code> example for the <code>GLAccordionItem</code>.
-      </gl-accordion-item>
-
-      <gl-accordion-item title="Item 3" :header-level="headerLevel" :visible="autoCollapse">
-        If you want the other accordion items to collapse when one is open, please see
-        <code>Auto Collapse</code> example.
-      </gl-accordion-item>
-    </gl-accordion>
-    `;
-
-const defaultValue = (prop) => GlAccordion.props[prop].default;
-
-const generateProps = ({ autoCollapse = defaultValue('autoCollapse'), headerLevel = 3 } = {}) => ({
-  autoCollapse,
-  headerLevel,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordion,
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/accordion',
-  component: GlAccordion,
-  parameters: {
-    bootstrapComponent: 'b-collapse',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};

package/src/components/base/accordion/accordion_item.spec.js

@@ -1,131 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { BCollapse } from 'bootstrap-vue';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
-import { waitForAnimationFrame } from '../../../utils/test_utils';
-import GlButton from '../button/button.vue';
-import GlAccordionItem from './accordion_item.vue';
-
-describe('GlAccordionItem', () => {
-  let wrapper;
-  const defaultTitle = 'Item 1';
-  const titleVisible = 'Item 1 visible';
-  const defaultSlot = 'Hello';
-
-  const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
-    wrapper = mount(GlAccordionItem, {
-      directives: {
-        GlCollapseToggle: GlCollapseToggleDirective,
-      },
-      provide: {
-        defaultHeaderLevel: () => defaultHeaderLevel,
-        accordionSetId: () => accordionSetId,
-      },
-      propsData: {
-        title: defaultTitle,
-        ...props,
-      },
-      slots: {
-        default: defaultSlot,
-      },
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  const findCollapse = () => wrapper.findComponent(BCollapse);
-  const findHeader = () => wrapper.find('.gl-accordion-item-header');
-
-  it('renders button text', () => {
-    createComponent();
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-  });
-
-  it('renders alternative button text when the content is visible and the titleVisible property is set', async () => {
-    createComponent({ titleVisible });
-
-    expect(findButton().find('span').text()).toBe(defaultTitle);
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().find('span').text()).toBe(titleVisible);
-  });
-
-  it('renders the appropriate header element', () => {
-    createComponent({}, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(true);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(false);
-  });
-
-  it('renders the appropriate header element when overridden', () => {
-    createComponent({ headerLevel: 4 }, { defaultHeaderLevel: 3 });
-
-    expect(wrapper.find('h3.gl-accordion-item-header').exists()).toBe(false);
-    expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBe(true);
-  });
-
-  it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(
-    'applies custom classes to the header',
-    (customClassProp) => {
-      createComponent({ headerClass: customClassProp }, { defaultHeaderLevel: 3 });
-
-      expect(findHeader().classes()).toContain('custom-header-class');
-    }
-  );
-
-  it('renders slot text', () => {
-    createComponent();
-
-    expect(findCollapse().text()).toBe(defaultSlot);
-  });
-
-  it('is not expanded by default', () => {
-    createComponent();
-
-    expect(findButton().props('icon')).toBe('chevron-right');
-    expect(findCollapse().props('visible')).toBe(false);
-  });
-
-  it('is expanded on button click', async () => {
-    createComponent();
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('passes accordion identifier to BCollapse', () => {
-    const accordionId = 'my-accordion';
-
-    createComponent({}, { accordionSetId: accordionId });
-
-    expect(findCollapse().props('accordion')).toBe(accordionId);
-  });
-
-  it('expands initially when visible prop is passed', async () => {
-    createComponent({ visible: true });
-
-    await wrapper.vm.$nextTick();
-
-    expect(findButton().props('icon')).toBe('chevron-down');
-    expect(findCollapse().props('visible')).toBe(true);
-  });
-
-  it('emits the initial visible state', () => {
-    createComponent({ visible: true });
-
-    expect(wrapper.emitted('input')).toEqual([[true]]);
-  });
-
-  it('emits the visible state when toggled', async () => {
-    createComponent({ visible: true });
-
-    await waitForAnimationFrame();
-    await findButton().trigger('click');
-
-    expect(wrapper.emitted('input')).toEqual([[true], [false]]);
-  });
-});

package/src/components/base/accordion/accordion_item.stories.js

@@ -1,57 +0,0 @@
-import readme from './accordion_item.md';
-import GlAccordionItem from './accordion_item.vue';
-
-const template = `
-    <gl-accordion-item :title="title" :titleVisible="titleVisible" :visible="visible" :header-level="headerLevel">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
-    </gl-accordion-item>
-    `;
-
-const defaultValue = (prop) => GlAccordionItem.props[prop].default;
-
-const generateProps = ({
-  visible = defaultValue('visible'),
-  headerLevel = 3,
-  title = 'Accordion Item Title',
-  titleVisible = undefined,
-} = {}) => ({
-  visible,
-  headerLevel,
-  title,
-  titleVisible,
-});
-
-const Template = (args) => ({
-  components: {
-    GlAccordionItem,
-  },
-  props: Object.keys(args),
-  template,
-  provide: {
-    defaultHeaderLevel: () => defaultValue('headerLevel'),
-    accordionSetId: () => '1',
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({ visible: true, titleVisible: 'Accordion Item Title Expanded' });
-
-export default {
-  title: 'base/accordion/accordion-item',
-  component: GlAccordionItem,
-  bootstrapComponent: 'b-collapse',
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerLevel: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: 'select',
-    },
-  },
-};