@carbon/styles 0.17.0 → 1.0.0-rc.0

package/scss/__tests__/grid-test.js

@@ -0,0 +1,48 @@
+/**
+ * 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/grid', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../grid' as *;
+
+      $_: get('api', (
+        variables: (
+          grid-gutter: meta.variable-exists('grid-gutter'),
+          grid-gutter-condensed: meta.variable-exists('grid-gutter-condensed'),
+          grid-breakpoints: meta.variable-exists('grid-breakpoints'),
+        ),
+        mixins: (
+          css-grid: meta.mixin-exists('css-grid'),
+          flex-grid: meta.mixin-exists('flex-grid'),
+        ),
+      ));
+    `);
+
+    const { value: api } = get('api');
+    expect(api).toEqual({
+      variables: {
+        'grid-gutter': true,
+        'grid-gutter-condensed': true,
+        'grid-breakpoints': true,
+      },
+      mixins: {
+        'css-grid': true,
+        'flex-grid': true,
+      },
+    });
+  });
+});

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,77 @@
+/**
+ * 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 [
+        "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/_breakpoint.scss

@@ -5,5 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/grid/scss/modules/breakpoint'
+@use './config';
+@forward '@carbon/grid/scss/breakpoint'
   show breakpoint, breakpoint-between, breakpoint-down, breakpoint-up;

package/scss/_config.scss

@@ -36,11 +36,11 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
-/// Specify if IBM Plex should be provided by Google Fonts
+/// Specify if IBM Plex should be provided by the IBM Akamai CDN
 /// @access public
 /// @type String
 /// @group config
-$use-google-fonts: false !default;
+$use-akamai-cdn: false !default;
 
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase
@@ -59,3 +59,10 @@ $flex-grid-columns: 16 !default;
 /// @type Boolean
 /// @group config
 $use-flexbox-grid: false !default;
+
+@forward '@carbon/grid/scss/config'
+  hide $prefix, $flex-grid-columns
+  with (
+  $prefix: $prefix,
+  $flex-grid-columns: $flex-grid-columns,
+);

package/scss/_spacing.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/layout/scss/modules/spacing'
+@forward '@carbon/layout/scss/spacing'
 show
   $spacing,
   $spacing-01,

package/scss/_theme.scss

@@ -6,18 +6,18 @@
 //
 
 @use './config' as *;
-@use '@carbon/themes/scss/modules/config' with (
+@use '@carbon/themes/scss/config' with (
   $prefix: $prefix,
 );
 @use './compat/themes' as compat;
 @use './themes';
 
-@forward '@carbon/themes/scss/modules/theme' with (
+@forward '@carbon/themes/scss/theme' with (
   $fallback: themes.$white !default,
   $theme: compat.$white !default,
 );
-@forward '@carbon/themes/scss/modules/tokens';
-@use '@carbon/themes/scss/modules/tokens';
+@forward '@carbon/themes/scss/tokens';
+@use '@carbon/themes/scss/tokens';
 @use './utilities/custom-property';
 
 // Layer sets

package/scss/_themes.scss

@@ -5,4 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/themes/scss/modules/themes' show $white, $g10, $g90, $g100;
+@use './config';
+@forward '@carbon/themes/scss/themes' show $white, $g10, $g90, $g100;

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');
+  });
+});