@carbon/styles 0.17.0 → 1.0.0-rc.0

package/scss/fonts/__tests__/fonts-test.js

@@ -0,0 +1,197 @@
+/**
+ * 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);
+
+const fonts = [
+  'mono',
+  'sans-arabic',
+  'sans-devanagari',
+  'sans-hebrew',
+  'sans-thai-looped',
+  'sans-thai',
+  'sans',
+  'serif',
+];
+const weights = [
+  'thin',
+  'extralight',
+  'light',
+  'regular',
+  'text',
+  'medium',
+  'semibold',
+  'bold',
+];
+
+describe('@carbon/styles/scss/fonts', () => {
+  it('should emit default fonts, weights, and styles', async () => {
+    const { result } = await render(`@use '../' as fonts;`);
+    const { stylesheet } = css.parse(result.css.toString());
+    const atRules = stylesheet.rules.filter((rule) => {
+      return rule.type === 'font-face';
+    });
+    const emitted = new Map();
+
+    for (const rule of atRules) {
+      const fontFamily = rule.declarations
+        .find((declaration) => {
+          return declaration.property === 'font-family';
+        })
+        .value.replace(/['"]/g, '');
+
+      if (!emitted.has(fontFamily)) {
+        emitted.set(fontFamily, {
+          weights: new Set(),
+          styles: new Set(),
+          src: new Set(),
+        });
+      }
+
+      const entry = emitted.get(fontFamily);
+
+      for (const declaration of rule.declarations) {
+        if (declaration.property === 'font-weight') {
+          entry.weights.add(declaration.value);
+        }
+
+        if (declaration.property === 'font-style') {
+          entry.styles.add(declaration.value);
+        }
+
+        if (declaration.property === 'src') {
+          entry.src.add(declaration.value);
+        }
+      }
+    }
+
+    expect(emitted.has('IBM Plex Mono')).toBe(true);
+    const mono = emitted.get('IBM Plex Mono');
+    expect(mono.weights).toEqual(new Set(['300', '400', '600']));
+    expect(mono.styles).toEqual(new Set(['normal', 'italic']));
+
+    expect(emitted.has('IBM Plex Sans')).toBe(true);
+    expect(emitted.get('IBM Plex Sans').weights).toEqual(
+      new Set(['300', '400', '600'])
+    );
+    expect(emitted.get('IBM Plex Sans').styles).toEqual(
+      new Set(['normal', 'italic'])
+    );
+
+    expect(emitted.has('IBM Plex Serif')).toBe(true);
+    expect(emitted.get('IBM Plex Serif').weights).toEqual(
+      new Set(['300', '400', '600'])
+    );
+    expect(emitted.get('IBM Plex Serif').styles).toEqual(
+      new Set(['normal', 'italic'])
+    );
+
+    expect(emitted).toMatchSnapshot();
+  });
+
+  it('should emit src from akamai cdn if $use-akamai-cdn is true', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $use-akamai-cdn: true,
+      );
+      @use '../' as fonts;
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const atRules = stylesheet.rules.filter((rule) => {
+      return rule.type === 'font-face';
+    });
+    const emitted = new Map();
+
+    for (const rule of atRules) {
+      const fontFamily = rule.declarations
+        .find((declaration) => {
+          return declaration.property === 'font-family';
+        })
+        .value.replace(/['"]/g, '');
+
+      if (!emitted.has(fontFamily)) {
+        emitted.set(fontFamily, {
+          weights: new Set(),
+          styles: new Set(),
+          src: new Set(),
+        });
+      }
+
+      const entry = emitted.get(fontFamily);
+
+      for (const declaration of rule.declarations) {
+        if (declaration.property === 'font-weight') {
+          entry.weights.add(declaration.value);
+        }
+
+        if (declaration.property === 'font-style') {
+          entry.styles.add(declaration.value);
+        }
+
+        if (declaration.property === 'src') {
+          entry.src.add(declaration.value);
+        }
+      }
+    }
+
+    expect(emitted).toMatchSnapshot();
+  });
+
+  it('should emit no @font-face blocks if $css--font-face is false', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $css--font-face: false,
+      );
+      @use '../' as fonts;
+    `);
+    expect(result.css.toString()).toBe('');
+  });
+
+  it('should not emit fonts set to false', async () => {
+    const { result } = await render(`
+      @use '../' as fonts with (
+        $fonts: (
+          IBM-Plex-Mono: false,
+          IBM-Plex-Sans: false,
+          IBM-Plex-Serif: false,
+        ),
+      );
+    `);
+    expect(result.css.toString()).toBe('');
+  });
+
+  describe.each(fonts)('scss/fonts/_%s.scss', (font) => {
+    it('should export all font weights as mixins', async () => {
+      const weightMixins = weights.map((weight) => {
+        return `$_: get('${weight}', meta.mixin-exists('${weight}', '${font}'));`;
+      });
+
+      const { unwrap } = await render(`
+        @use 'sass:meta';
+        @use '../${font}';
+
+        ${weightMixins.join('\n')}
+        $_: get('all', meta.mixin-exists('all', '${font}'));
+        $_: get('default', meta.mixin-exists('default', '${font}'));
+      `);
+
+      for (const weight of weights) {
+        expect(unwrap(weight)).toBe(true);
+      }
+
+      expect(unwrap('all')).toBe(true);
+      expect(unwrap('default')).toBe(true);
+    });
+  });
+});

package/scss/fonts/_src.scss

@@ -21,50 +21,42 @@ $-filenames: (
   IBM-Plex-Serif: 'IBMPlexSerif',
 );
 
-$-google-filenames: (
+$-akamai-filenames: (
   IBM-Plex-Mono: (
-    name: 'ibmplexmono',
-    version: 'v7',
-    hash: '-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-otFQ',
+    name: 'IBM-Plex-Mono',
+    filename: 'IBMPlexMono',
   ),
   IBM-Plex-Sans-Arabic: (
-    name: 'ibmplexsansarabic',
-    version: 'v5',
-    hash: 'Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PW5fslBEg0',
+    name: 'IBM-Plex-Sans-Arabic',
+    filename: 'IBMPlexSansArabic',
   ),
   IBM-Plex-Sans-Devanagari: (
-    name: 'ibmplexsansdevanagari',
-    version: 'v5',
-    hash: 'XRXH3JCMvG4IDoS9SubXB6W-UX5iehIMBFR2-O_PX0j1Uc7wCWQq',
+    name: 'IBM-Plex-Sans-Devanagari',
+    filename: 'IBMPlexSansDevanagari',
   ),
   IBM-Plex-Sans-Hebrew: (
-    name: 'ibmplexsanshebrew',
-    version: 'v5',
-    hash: 'BCa2qYENg9Kw1mpLpO0bGM5lfHAAZHhDXE2v-lgVrjaNzC4',
+    name: 'IBM-Plex-Sans-Hebrew',
+    filename: 'IBMPlexSansHebrew',
   ),
   IBM-Plex-Sans-Thai-Looped: (
-    name: 'ibmplexsansthailooped',
-    version: 'v5',
-    hash: 'tss_AoJJRAhL3BTrK3r2xxbFhvKfyBB6l7hHT30L9BiKoXOrFCUb6Q',
+    name: 'IBM-Plex-Sans-Thai-Looped',
+    filename: 'IBMPlexSansThaiLooped',
   ),
   IBM-Plex-Sans-Thai: (
-    name: 'ibmplexsansthai',
-    version: 'v5',
-    hash: 'm8JPje1VVIzcq1HzJq2AEdo2Tj_qvLqMBNYgR8BKU4cX',
+    name: 'IBM-Plex-Sans-Thai',
+    filename: 'IBMPlexSansThai',
   ),
   IBM-Plex-Sans: (
-    name: 'ibmplexsans',
-    version: 'v9',
-    hash: 'zYXgKVElMYYaJe8bpLHnCwDKhdzeFaxOedfTDw',
+    name: 'IBM-Plex-Sans',
+    filename: 'IBMPlexSans',
   ),
   IBM-Plex-Serif: (
-    name: 'ibmplexserif',
-    version: 'v10',
-    hash: 'jizDREVNn1dOx-zrZ2X3pZvkTiUS2zcZiVbJsNo',
+    name: 'IBM-Plex-Serif',
+    filename: 'IBMPlexSerif',
   ),
 );
 
-@function -get-google-filename($map, $keys...) {
+@function -get-akamai-filename($map, $keys...) {
   @each $key in $keys {
     $map: map.get($map, $key);
   }
@@ -88,15 +80,34 @@ $-google-filenames: (
 /// @param {List} $formats
 /// @returns List
 @function -default-resolver($name, $weight, $style, $unicode-range, $formats) {
-  @if (config.$use-google-fonts) {
-    $filename: -get-google-filename($-google-filenames, $name, 'name');
-    $version: -get-google-filename($-google-filenames, $name, 'version');
-    $hash: -get-google-filename($-google-filenames, $name, 'hash');
+  @if (config.$use-akamai-cdn) {
+    $name: -get-akamai-filename($-akamai-filenames, $name, 'name');
+    $filename: -get-akamai-filename($-akamai-filenames, $name, 'filename');
+
+    // Special case for weight = Regular (400)
+    @if $weight == Regular {
+      @if $style == italic {
+        $filename: '#{$filename}-Italic';
+      } @else {
+        $filename: '#{$filename}-Regular';
+      }
+    } @else {
+      // Otherwise add weight + optional style (italic)
+      $filename: '#{$filename}-#{$weight}';
+      @if $style == italic {
+        $filename: '#{$filename}Italic';
+      }
+    }
 
     $filenames: ();
 
     @each $format in $formats {
-      $url: 'https://fonts.gstatic.com/s/#{$filename}/#{$version}/#{$hash}';
+      $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}';
+      @if $unicode-range {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/split/#{$format}/#{$filename}-#{$unicode-range}';
+      } @else {
+        $url: 'https://1.www.s81c.com/common/carbon/plex/fonts/#{$name}/fonts/complete/#{$format}/#{$filename}';
+      }
 
       // Add extension
       $url: '#{$url}.#{$format}';

package/scss/grid/_css-grid.scss

@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@use '../config';
+@use '@carbon/grid';
+
+@include grid.css-grid();

package/scss/grid/_flexbox.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'config';
+@use '../config';
 @use '@carbon/grid';
 
 @include grid.flex-grid();

package/scss/grid/_index.scss

@@ -5,9 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'config';
-@use '@carbon/grid';
 @use '../config';
+@forward '@carbon/grid' show
+  $grid-gutter,
+  $grid-gutter-condensed,
+  $grid-breakpoints,
+  flex-grid,
+  css-grid;
+@use '@carbon/grid';
 
 @if config.$use-flexbox-grid == true {
   @include grid.flex-grid();

package/scss/grid/_mixins.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use '../config';
+@forward '@carbon/grid' show css-grid, flex-grid;

package/scss/type/_reset.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/type/scss/modules/reset';
+@forward '@carbon/type/scss/reset';

package/scss/utilities/__tests__/custom-property-test.js

@@ -0,0 +1,50 @@
+/**
+ * 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/utilities/custom-property', () => {
+  it('should support getting the property name from a value', async () => {
+    const { unwrap } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      $_: get('name', custom-property.get-name('test'));
+    `);
+    expect(unwrap('name')).toBe('--cds-test');
+  });
+
+  it('should support emitting a declaration for a CSS Custom Property', async () => {
+    const { result } = await render(`
+      @use '../../config' with (
+        $prefix: 'cds',
+      );
+      @use '../custom-property';
+
+      .test {
+        @include custom-property.declaration(test, #000000);
+      }
+    `);
+    const { stylesheet } = css.parse(result.css.toString());
+    const selector = stylesheet.rules.find((rule) => {
+      return rule.selectors.includes('.test');
+    });
+    const [declaration] = selector.declarations;
+
+    expect(declaration.property).toBe('--cds-test');
+    expect(declaration.value).toBe('#000000');
+  });
+});

package/scss/utilities/_component-tokens.scss

@@ -7,7 +7,8 @@
 
 @use 'sass:map';
 @use 'sass:meta';
-@use "sass:list";
+@use 'sass:list';
+@use '../config';
 @use '../themes';
 @use '../theme';
 @use './custom-property';

package/scss/utilities/_convert.scss

@@ -20,8 +20,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function rem($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {
@@ -38,8 +37,7 @@ $base-font-size: 16px !default;
 /// @group utilities
 @function em($px) {
   @if unit($px) != 'px' {
-    // TODO: update to @error in v11
-    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+    @error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
   @if meta.function-exists('div', 'math') {

package/scss/utilities/_high-contrast-mode.scss

@@ -5,15 +5,13 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-/// Windows HCM Mixin
+/// High Contrast Mode mixin for Windows and macOS
 /// @access public
 /// @example @include high-contrast-mode;
 /// @group utilities
 /// Set HCM styles at the end of each file to ensure they are not overwritten
 @mixin high-contrast-mode($type: '') {
-  @media screen and (-ms-high-contrast: active),
-    (forced-colors: active),
-    (prefers-contrast) {
+  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
     @if ($type == 'icon-fill') {
       fill: ButtonText;
     }