@carbon/styles 0.16.0-rc.0 → 0.16.2

package/scss/__tests__/layer-test.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+const css = require('css');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/layer', () => {
+  it('should map layer set values to scoped $prefix--layer selectors', async () => {
+    const { result } = await render(`
+      @use '../config' with (
+        $prefix: 'cds',
+      );
+      @use '../layer' with (
+        $layer-sets: (
+          field: (
+            rgba(0, 0, 0, 0.3),
+            rgba(0, 0, 0, 0.2),
+            rgba(0, 0, 0, 0.1),
+          ),
+          background: (
+            rgba(0, 0, 0, 0.8),
+            rgba(0, 0, 0, 0.7),
+            rgba(0, 0, 0, 0.6),
+          ),
+        )
+      );
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+
+    function findSelector(stylesheet, matcher) {
+      return stylesheet.rules.find((rule) => {
+        return rule.selectors.some((selector) => {
+          return selector.includes(matcher);
+        });
+      });
+    }
+
+    function findDeclaration(rule, property) {
+      return rule.declarations.find((declaration) => {
+        return declaration.property.includes(property);
+      });
+    }
+
+    const root = findSelector(stylesheet, ':root');
+    const layer1 = findSelector(stylesheet, '.cds--layer-one');
+    const layer2 = findSelector(stylesheet, '.cds--layer-two');
+    const layer3 = findSelector(stylesheet, '.cds--layer-three');
+
+    expect(findDeclaration(root, '--cds-field').value).toBe(
+      'rgba(0, 0, 0, 0.3)'
+    );
+    expect(findDeclaration(layer1, '--cds-field').value).toBe(
+      'rgba(0, 0, 0, 0.3)'
+    );
+    expect(findDeclaration(layer2, '--cds-field').value).toBe(
+      'rgba(0, 0, 0, 0.2)'
+    );
+    expect(findDeclaration(layer3, '--cds-field').value).toBe(
+      'rgba(0, 0, 0, 0.1)'
+    );
+
+    expect(findDeclaration(layer1, '--cds-background').value).toBe(
+      'rgba(0, 0, 0, 0.8)'
+    );
+    expect(findDeclaration(layer2, '--cds-background').value).toBe(
+      'rgba(0, 0, 0, 0.7)'
+    );
+    expect(findDeclaration(layer3, '--cds-background').value).toBe(
+      'rgba(0, 0, 0, 0.6)'
+    );
+  });
+});

package/scss/__tests__/motion-test.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/motion', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../motion';
+
+      $_: get('api', (
+        variables: meta.module-variables('motion'),
+        functions: (
+          motion: meta.function-exists('motion', 'motion'),
+        ),
+        mixins: (
+          motion: meta.mixin-exists('motion', 'motion'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+
+    expect(api).toMatchSnapshot();
+  });
+});

package/scss/__tests__/reset-test.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/reset', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../reset';
+
+      $_: get('mixin', meta.mixin-exists('reset', 'reset'));
+    `);
+
+    const { value: mixin } = get('mixin');
+    expect(mixin).toBe(true);
+  });
+});

package/scss/__tests__/theme-test.js

@@ -0,0 +1,151 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/theme', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../theme';
+
+      $_: get('api', (
+        variables: map.keys(meta.module-variables('theme')),
+        mixins: (
+          theme: meta.mixin-exists('theme', 'theme'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+    expect(api.mixins).toEqual({
+      theme: true,
+    });
+    expect(api.variables).toMatchInlineSnapshot(`
+      Array [
+        "fallback",
+        "theme",
+        "background",
+        "background-active",
+        "background-selected",
+        "background-selected-hover",
+        "background-hover",
+        "background-brand",
+        "background-inverse",
+        "background-inverse-hover",
+        "layer-01",
+        "layer-active-01",
+        "layer-hover-01",
+        "layer-selected-01",
+        "layer-selected-hover-01",
+        "layer-02",
+        "layer-active-02",
+        "layer-hover-02",
+        "layer-selected-02",
+        "layer-selected-hover-02",
+        "layer-03",
+        "layer-active-03",
+        "layer-hover-03",
+        "layer-selected-03",
+        "layer-selected-hover-03",
+        "layer-selected-inverse",
+        "layer-selected-disabled",
+        "layer-accent-01",
+        "layer-accent-active-01",
+        "layer-accent-hover-01",
+        "layer-accent-02",
+        "layer-accent-active-02",
+        "layer-accent-hover-02",
+        "layer-accent-03",
+        "layer-accent-active-03",
+        "layer-accent-hover-03",
+        "field-01",
+        "field-hover-01",
+        "field-02",
+        "field-hover-02",
+        "field-03",
+        "field-hover-03",
+        "interactive",
+        "border-subtle-00",
+        "border-subtle-01",
+        "border-subtle-selected-01",
+        "border-subtle-02",
+        "border-subtle-selected-02",
+        "border-subtle-03",
+        "border-subtle-selected-03",
+        "border-strong-01",
+        "border-strong-02",
+        "border-strong-03",
+        "border-inverse",
+        "border-interactive",
+        "border-disabled",
+        "text-primary",
+        "text-secondary",
+        "text-placeholder",
+        "text-helper",
+        "text-error",
+        "text-inverse",
+        "text-on-color",
+        "text-on-color-disabled",
+        "text-disabled",
+        "link-primary",
+        "link-primary-hover",
+        "link-secondary",
+        "link-visited",
+        "link-inverse",
+        "link-inverse-active",
+        "link-inverse-hover",
+        "icon-primary",
+        "icon-secondary",
+        "icon-inverse",
+        "icon-on-color",
+        "icon-on-color-disabled",
+        "icon-disabled",
+        "support-error",
+        "support-success",
+        "support-warning",
+        "support-info",
+        "support-error-inverse",
+        "support-success-inverse",
+        "support-warning-inverse",
+        "support-info-inverse",
+        "support-caution-major",
+        "support-caution-minor",
+        "support-caution-undefined",
+        "highlight",
+        "overlay",
+        "toggle-off",
+        "shadow",
+        "focus",
+        "focus-inset",
+        "focus-inverse",
+        "skeleton-background",
+        "skeleton-element",
+        "layer",
+        "layer-active",
+        "layer-hover",
+        "layer-selected",
+        "layer-selected-hover",
+        "layer-accent",
+        "layer-accent-hover",
+        "layer-accent-active",
+        "field",
+        "field-hover",
+        "border-subtle",
+        "border-subtle-selected",
+        "border-strong",
+      ]
+    `);
+  });
+});

package/scss/__tests__/themes-test.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/themes', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../themes';
+
+      $_: get('api', map.keys(meta.module-variables('themes')));
+    `);
+
+    const { value: api } = get('api');
+    expect(api).toMatchInlineSnapshot(`
+      Array [
+        "white",
+        "g10",
+        "g90",
+        "g100",
+      ]
+    `);
+  });
+});

package/scss/__tests__/type-test.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/type', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../type';
+
+      $_: get('api', (
+        variables: map.keys(meta.module-variables('type')),
+        mixins: (
+          reset: meta.mixin-exists('reset', 'type'),
+          type-style: meta.mixin-exists('type-style', 'type'),
+          font-family: meta.mixin-exists('font-family', 'type'),
+          default-type: meta.mixin-exists('default-type', 'type'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+    expect(api.mixins).toEqual({
+      reset: true,
+      'type-style': true,
+      'font-family': true,
+      'default-type': true,
+    });
+    expect(api.variables).toMatchInlineSnapshot(`
+      Array [
+        "caption-01",
+        "label-01",
+        "helper-text-01",
+        "body-short-01",
+        "body-short-02",
+        "body-long-01",
+        "body-long-02",
+        "code-01",
+        "code-02",
+        "heading-01",
+        "heading-02",
+        "productive-heading-01",
+        "productive-heading-02",
+        "productive-heading-03",
+        "productive-heading-04",
+        "productive-heading-05",
+        "productive-heading-06",
+        "productive-heading-07",
+        "expressive-paragraph-01",
+        "expressive-heading-01",
+        "expressive-heading-02",
+        "expressive-heading-03",
+        "expressive-heading-04",
+        "expressive-heading-05",
+        "expressive-heading-06",
+        "quotation-01",
+        "quotation-02",
+        "display-01",
+        "display-02",
+        "display-03",
+        "display-04",
+        "tokens",
+      ]
+    `);
+  });
+});

package/scss/_config.scss

@@ -54,3 +54,8 @@ $prefix: 'cds' !default;
 /// @access public
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
+
+/// Specify if the default grid type should be the flexbox grid
+/// @type Boolean
+/// @group config
+$use-flexbox-grid: false !default;

package/scss/_reset.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'config';
-@use 'type';
+@use 'type/reset' as type;
 
 @mixin reset {
   /// http://meyerweb.com/eric/tools/css/reset/

package/scss/components/__tests__/accordion-test.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/accordion', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../accordion';
+
+      $_: get('mixin', meta.mixin-exists('accordion', 'accordion'));
+      $_: get('variables', map.keys(meta.module-variables('accordion')));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+    expect(unwrap('variables')).toMatchInlineSnapshot(`
+      Array [
+        "flex-direction",
+        "justify-content",
+        "arrow-margin",
+        "title-margin",
+        "content-padding",
+      ]
+    `);
+  });
+
+  test('configuration', async () => {
+    const { unwrap } = await render(`
+      @use '../accordion' with (
+        $flex-direction: row,
+      );
+      $_: get('direction', accordion.$flex-direction);
+    `);
+    expect(unwrap('direction')).toBe('row');
+  });
+});

package/scss/components/__tests__/breadcrumb-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/breadcrumb', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../breadcrumb';
+
+      $_: get('mixin', meta.mixin-exists('breadcrumb', 'breadcrumb'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/button-test.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/button', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../button';
+
+      $_: get('mixin', meta.mixin-exists('button', 'button'));
+      $_: get('variables', map.keys(meta.module-variables('button')));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+    expect(unwrap('variables')).toMatchInlineSnapshot(`
+Array [
+  "button-font-weight",
+  "button-font-size",
+  "button-border-radius",
+  "button-height",
+  "button-padding",
+  "button-padding-field",
+  "button-padding-sm",
+  "button-padding-lg",
+  "button-padding-ghost",
+  "button-padding-ghost-field",
+  "button-padding-ghost-sm",
+  "button-border-width",
+  "button-outline-width",
+  "button-separator",
+  "button-primary",
+  "button-secondary",
+  "button-tertiary",
+  "button-danger-primary",
+  "button-danger-secondary",
+  "button-danger-active",
+  "button-primary-active",
+  "button-secondary-active",
+  "button-tertiary-active",
+  "button-danger-hover",
+  "button-primary-hover",
+  "button-secondary-hover",
+  "button-tertiary-hover",
+  "button-disabled",
+  "button-tokens",
+]
+`);
+  });
+
+  test('configuration', async () => {
+    const { unwrap } = await render(`
+      @use '../button' with (
+        $button-height: 2rem,
+      );
+      $_: get('height', button.$button-height);
+    `);
+    expect(unwrap('height')).toBe('2rem');
+  });
+});

package/scss/components/__tests__/checkbox-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/checkbox', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../checkbox';
+
+      $_: get('mixin', meta.mixin-exists('checkbox', 'checkbox'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});

package/scss/components/__tests__/code-snippet-test.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/code-snippet', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../code-snippet';
+
+      $_: get('mixin', meta.mixin-exists('code-snippet', 'code-snippet'));
+      $_: get('variables', map.keys(meta.module-variables('code-snippet')));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+    expect(unwrap('variables')).toMatchInlineSnapshot(`
+      Array [
+        "copy-active",
+        "copy-btn-feedback",
+      ]
+    `);
+  });
+
+  test('configuration', async () => {
+    const { unwrap } = await render(`
+      @use '../code-snippet' with (
+        $copy-active: #000,
+      );
+      $_: get('background-color', code-snippet.$copy-active);
+    `);
+    expect(unwrap('background-color')).toBe('#000');
+  });
+});

package/scss/components/__tests__/combo-box-test.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/components/combo-box', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../combo-box';
+
+      $_: get('mixin', meta.mixin-exists('combo-box', 'combo-box'));
+    `);
+    expect(unwrap('mixin')).toBe(true);
+  });
+});