feat(styles): add accordion styles and tests

packages/styles/index.scss

@@ -5,9 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/config' with (
-  $prefix: 'bx' !default,
-);
+@forward 'scss/config';
 @forward 'scss/colors' hide $white;
 @forward 'scss/grid';
 @forward 'scss/motion';

packages/styles/scss/__tests__/theme-test.js

@@ -37,6 +37,152 @@ describe('@carbon/styles/scss/theme', () => {
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
         "theme",
+        "interactive-01",
+        "interactive-02",
+        "interactive-03",
+        "interactive-04",
+        "ui-background",
+        "ui-01",
+        "ui-02",
+        "ui-03",
+        "ui-04",
+        "ui-05",
+        "text-01",
+        "text-02",
+        "text-03",
+        "text-04",
+        "text-05",
+        "text-error",
+        "icon-01",
+        "icon-02",
+        "icon-03",
+        "link-01",
+        "link-02",
+        "inverse-link",
+        "field-01",
+        "field-02",
+        "inverse-01",
+        "inverse-02",
+        "support-01",
+        "support-02",
+        "support-03",
+        "support-04",
+        "inverse-support-01",
+        "inverse-support-02",
+        "inverse-support-03",
+        "inverse-support-04",
+        "overlay-01",
+        "danger-01",
+        "danger-02",
+        "focus",
+        "inverse-focus-ui",
+        "hover-primary",
+        "active-primary",
+        "hover-primary-text",
+        "hover-secondary",
+        "active-secondary",
+        "hover-tertiary",
+        "active-tertiary",
+        "hover-ui",
+        "hover-light-ui",
+        "hover-selected-ui",
+        "active-ui",
+        "active-light-ui",
+        "selected-ui",
+        "selected-light-ui",
+        "inverse-hover-ui",
+        "hover-danger",
+        "active-danger",
+        "hover-row",
+        "visited-link",
+        "disabled-01",
+        "disabled-02",
+        "disabled-03",
+        "highlight",
+        "decorative-01",
+        "button-separator",
+        "skeleton-01",
+        "skeleton-02",
+        "background",
+        "layer",
+        "layer-accent",
+        "field",
+        "background-inverse",
+        "background-brand",
+        "interactive",
+        "border-subtle",
+        "border-strong",
+        "border-inverse",
+        "border-interactive",
+        "text-primary",
+        "text-secondary",
+        "text-placeholder",
+        "text-helper",
+        "text-on-color",
+        "text-inverse",
+        "link-primary",
+        "link-secondary",
+        "link-visited",
+        "link-inverse",
+        "icon-primary",
+        "icon-secondary",
+        "icon-on-color",
+        "icon-inverse",
+        "support-error",
+        "support-success",
+        "support-warning",
+        "support-info",
+        "support-error-inverse",
+        "support-success-inverse",
+        "support-warning-inverse",
+        "support-info-inverse",
+        "overlay",
+        "toggle-off",
+        "button-primary",
+        "button-secondary",
+        "button-tertiary",
+        "button-danger-primary",
+        "button-danger-secondary",
+        "background-active",
+        "layer-active",
+        "button-danger-active",
+        "button-primary-active",
+        "button-secondary-active",
+        "button-tertiary-active",
+        "focus-inset",
+        "focus-inverse",
+        "background-hover",
+        "layer-hover",
+        "field-hover",
+        "background-inverse-hover",
+        "link-primary-hover",
+        "button-danger-hover",
+        "button-primary-hover",
+        "button-secondary-hover",
+        "button-tertiary-hover",
+        "background-selected",
+        "background-selected-hover",
+        "layer-selected",
+        "layer-selected-hover",
+        "layer-selected-inverse",
+        "border-subtle-selected",
+        "layer-disabled",
+        "field-disabled",
+        "border-disabled",
+        "text-disabled",
+        "button-disabled",
+        "icon-disabled",
+        "text-on-color-disabled",
+        "icon-on-color-disabled",
+        "layer-selected-disabled",
+        "skeleton-background",
+        "skeleton-element",
+        "brand-01",
+        "brand-02",
+        "brand-03",
+        "active-01",
+        "hover-field",
+        "danger",
       ]
     `);
   });

packages/styles/scss/_spacing.scss

@@ -0,0 +1,26 @@
+//
+// 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.
+//
+
+@forward '@carbon/layout/scss/modules/spacing'
+show
+  $spacing-01,
+  $spacing-02,
+  $spacing-03,
+  $spacing-04,
+  $spacing-05,
+  $spacing-06,
+  $spacing-07,
+  $spacing-08,
+  $spacing-09,
+  $spacing-10,
+  $spacing-11,
+  $spacing-12,
+  $spacing-13,
+  $fluid-spacing-01,
+  $fluid-spacing-02,
+  $fluid-spacing-03,
+  $fluid-spacing-04;

packages/styles/scss/_theme.scss

@@ -6,3 +6,151 @@
 //
 
 @forward '@carbon/themes/scss/modules/theme';
+@forward '@carbon/themes/scss/modules/tokens'
+show
+  $interactive-01,
+  $interactive-02,
+  $interactive-03,
+  $interactive-04,
+  $ui-background,
+  $ui-01,
+  $ui-02,
+  $ui-03,
+  $ui-04,
+  $ui-05,
+  $text-01,
+  $text-02,
+  $text-03,
+  $text-04,
+  $text-05,
+  $text-error,
+  $icon-01,
+  $icon-02,
+  $icon-03,
+  $link-01,
+  $link-02,
+  $inverse-link,
+  $field-01,
+  $field-02,
+  $inverse-01,
+  $inverse-02,
+  $support-01,
+  $support-02,
+  $support-03,
+  $support-04,
+  $inverse-support-01,
+  $inverse-support-02,
+  $inverse-support-03,
+  $inverse-support-04,
+  $overlay-01,
+  $danger-01,
+  $danger-02,
+  $focus,
+  $inverse-focus-ui,
+  $hover-primary,
+  $active-primary,
+  $hover-primary-text,
+  $hover-secondary,
+  $active-secondary,
+  $hover-tertiary,
+  $active-tertiary,
+  $hover-ui,
+  $hover-light-ui,
+  $hover-selected-ui,
+  $active-ui,
+  $active-light-ui,
+  $selected-ui,
+  $selected-light-ui,
+  $inverse-hover-ui,
+  $hover-danger,
+  $active-danger,
+  $hover-row,
+  $visited-link,
+  $disabled-01,
+  $disabled-02,
+  $disabled-03,
+  $highlight,
+  $decorative-01,
+  $button-separator,
+  $skeleton-01,
+  $skeleton-02,
+  $background,
+  $layer,
+  $layer-accent,
+  $field,
+  $background-inverse,
+  $background-brand,
+  $interactive,
+  $border-subtle,
+  $border-strong,
+  $border-inverse,
+  $border-interactive,
+  $text-primary,
+  $text-secondary,
+  $text-placeholder,
+  $text-helper,
+  $text-on-color,
+  $text-inverse,
+  $link-primary,
+  $link-secondary,
+  $link-visited,
+  $link-inverse,
+  $icon-primary,
+  $icon-secondary,
+  $icon-on-color,
+  $icon-inverse,
+  $support-error,
+  $support-success,
+  $support-warning,
+  $support-info,
+  $support-error-inverse,
+  $support-success-inverse,
+  $support-warning-inverse,
+  $support-info-inverse,
+  $overlay,
+  $toggle-off,
+  $button-primary,
+  $button-secondary,
+  $button-tertiary,
+  $button-danger-primary,
+  $button-danger-secondary,
+  $background-active,
+  $layer-active,
+  $button-danger-active,
+  $button-primary-active,
+  $button-secondary-active,
+  $button-tertiary-active,
+  $focus-inset,
+  $focus-inverse,
+  $background-hover,
+  $layer-hover,
+  $field-hover,
+  $background-inverse-hover,
+  $link-primary-hover,
+  $button-danger-hover,
+  $button-primary-hover,
+  $button-secondary-hover,
+  $button-tertiary-hover,
+  $background-selected,
+  $background-selected-hover,
+  $layer-selected,
+  $layer-selected-hover,
+  $layer-selected-inverse,
+  $border-subtle-selected,
+  $layer-disabled,
+  $field-disabled,
+  $border-disabled,
+  $text-disabled,
+  $button-disabled,
+  $icon-disabled,
+  $text-on-color-disabled,
+  $icon-on-color-disabled,
+  $layer-selected-disabled,
+  $skeleton-background,
+  $skeleton-element,
+  $brand-01,
+  $brand-02,
+  $brand-03,
+  $active-01,
+  $hover-field,
+  $danger;

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

packages/styles/scss/components/_index.scss

@@ -4,3 +4,5 @@
 // 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 'accordion';