@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-chip/index.ts

@@ -0,0 +1,33 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkSelectableChip, {
+  type Props as SelectableProps,
+} from './src/BpkSelectableChip';
+import BpkDismissibleChip from './src/BpkDismissibleChip';
+import BpkDropdownChip from './src/BpkDropdownChip';
+import type { CommonProps } from './src/commonTypes';
+import { CHIP_TYPES } from './src/commonTypes';
+import themeAttributes from './src/themeAttributes';
+
+export type BpkSelectableChipProps = SelectableProps;
+export type BpkDismissibleChipProps = CommonProps;
+export type BpkDropdownChipProps = CommonProps;
+
+export default BpkSelectableChip;
+export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/src/BpkDismissibleChip-test.tsx

@@ -0,0 +1,84 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+
+import BpkDismissibleChip from './BpkDismissibleChip';
+import type { CommonProps as Props } from './commonTypes';
+import { CHIP_TYPES } from './commonTypes';
+
+// Just a convenience wrapper that includes the default props so we don't
+// have to keep writing them for each test.
+const TestChip = ({
+  ...rest
+}: Omit<Props, 'onClick' | 'accessibilityLabel' | 'children'>) => (
+  <BpkDismissibleChip
+    onClick={() => null}
+    accessibilityLabel="Dismiss"
+    {...rest}
+  >
+    Dismiss me
+  </BpkDismissibleChip>
+);
+
+describe('BpkDismissibleChip', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<TestChip />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it(`should override setting selected={true}, resulting in selected={false}`, () => {
+    const { asFragment } = render(<TestChip selected />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it(`should ignore setting a trailing accessory view, resulting in a close icon`, () => {
+    const { asFragment } = render(
+      // @ts-ignore
+      <TestChip trailingAccessoryView={<span>trailing</span>} />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  Object.values(CHIP_TYPES).forEach((chipType) => {
+    it(`should render correctly with type="${chipType}"`, () => {
+      const { asFragment } = render(<TestChip type={chipType} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and disabled`, () => {
+      const { asFragment } = render(<TestChip type={chipType} disabled />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
+      const { asFragment } = render(
+        <TestChip
+          type={chipType}
+          leadingAccessoryView={<span>Leading</span>}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  it('should render correctly with a "className" attribute', () => {
+    const { asFragment } = render(<TestChip className="custom-class" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-chip/src/BpkDismissibleChip.tsx

@@ -0,0 +1,61 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+The dismissible chip component is just a selectable chip that's
+been hard coded to have disabled={false}, selected and a trailing
+accessory view of a close icon.
+*/
+
+import { cssModules } from '../../bpk-react-utils';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
+
+import BpkSelectableChip from './BpkSelectableChip';
+import type { CommonProps as Props } from './commonTypes';
+import { CHIP_TYPES } from './commonTypes';
+import STYLES from './BpkSelectableChip.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkDismissibleChip = ({
+  className,
+  leadingAccessoryView = null,
+  type = CHIP_TYPES.default,
+  ...rest
+}: Props) => {
+  const iconClassNames = getClassName(
+    `bpk-chip--${type}-dismissible__trailing-accessory-view`,
+  );
+  const classNames = getClassName(`bpk-chip--${type}-dismissible`, className);
+
+  return (
+    <BpkSelectableChip
+      {...rest}
+      leadingAccessoryView={leadingAccessoryView}
+      disabled={false}
+      trailingAccessoryView={<CloseCircleIconSm className={iconClassNames} />}
+      selected
+      type={type}
+      role="button" // Override role="checkbox" because this chip is not selectable.
+      className={classNames}
+    />
+  );
+};
+
+export default BpkDismissibleChip;

package/bpk-component-chip/src/BpkDropdownChip-test.tsx

@@ -0,0 +1,76 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+
+import BpkDropdownChip from './BpkDropdownChip';
+import { CHIP_TYPES } from './commonTypes';
+
+// Just a convenience wrapper that includes the default props so we don't
+// have to keep writing them for each test.
+const TestChip = ({ ...rest }) => (
+  <BpkDropdownChip onClick={() => null} accessibilityLabel="Toggle" {...rest}>
+    Toggle me
+  </BpkDropdownChip>
+);
+
+describe('BpkDropdownChip', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<TestChip />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  Object.values(CHIP_TYPES).forEach((chipType) => {
+    it(`should render correctly with type="${chipType}"`, () => {
+      const { asFragment } = render(<TestChip type={chipType} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and selected`, () => {
+      const { asFragment } = render(<TestChip type={chipType} selected />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and disabled`, () => {
+      const { asFragment } = render(<TestChip type={chipType} disabled />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}", selected and disabled`, () => {
+      const { asFragment } = render(
+        <TestChip type={chipType} selected disabled />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
+      const { asFragment } = render(
+        <TestChip
+          type={chipType}
+          leadingAccessoryView={<span>Leading</span>}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  it('should render correctly with a "className" attribute', () => {
+    const { asFragment } = render(<TestChip className="custom-class" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-chip/src/BpkDropdownChip.tsx

@@ -0,0 +1,48 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+The dropdown chip component is just a selectable chip component
+with a trailing accessory view of a chevron down icon.
+*/
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import ChevronDownIconSm from '../../bpk-component-icon/sm/chevron-down';
+
+import BpkSelectableChip from './BpkSelectableChip';
+import type { CommonProps as Props } from './commonTypes';
+import { CHIP_TYPES } from './commonTypes';
+
+const BpkDropdownChip = ({
+  disabled = false,
+  leadingAccessoryView = null,
+  selected = false,
+  type = CHIP_TYPES.default,
+  ...rest
+}: Props) => (
+  <BpkSelectableChip
+    disabled={disabled}
+    leadingAccessoryView={leadingAccessoryView}
+    selected={selected}
+    type={type}
+    {...rest}
+    trailingAccessoryView={<ChevronDownIconSm />}
+  />
+);
+
+export default BpkDropdownChip;

package/bpk-component-chip/src/BpkSelectableChip-test.tsx

@@ -0,0 +1,100 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+
+import type { Props } from './BpkSelectableChip';
+import BpkSelectableChip from './BpkSelectableChip';
+import { CHIP_TYPES } from './commonTypes';
+
+// Just a convenience wrapper that includes the default props so we don't
+// have to keep writing them for each test.
+const TestChip = ({
+  ...rest
+}: Omit<Props, 'onClick' | 'accessibilityLabel' | 'children'>) => (
+  <BpkSelectableChip onClick={() => null} accessibilityLabel="Toggle" {...rest}>
+    Toggle me
+  </BpkSelectableChip>
+);
+
+describe('BpkSelectableChip', () => {
+  it('should render correctly', () => {
+    const { asFragment } = render(<TestChip />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  Object.values(CHIP_TYPES).forEach((chipType) => {
+    it(`should render correctly with type="${chipType}"`, () => {
+      const { asFragment } = render(<TestChip type={chipType} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and selected`, () => {
+      const { asFragment } = render(<TestChip type={chipType} selected />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and disabled`, () => {
+      const { asFragment } = render(<TestChip type={chipType} disabled />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}", selected and disabled`, () => {
+      const { asFragment } = render(
+        <TestChip type={chipType} selected disabled />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and a leading accessory view`, () => {
+      const { asFragment } = render(
+        <TestChip
+          type={chipType}
+          leadingAccessoryView={<span>Leading</span>}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and a trailing accessory view`, () => {
+      const { asFragment } = render(
+        <TestChip
+          type={chipType}
+          trailingAccessoryView={<span>Trailing</span>}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+
+    it(`should render correctly with type="${chipType}" and both a leading and trailing accessory view`, () => {
+      const { asFragment } = render(
+        <TestChip
+          type={chipType}
+          leadingAccessoryView={<span>Leading</span>}
+          trailingAccessoryView={<span>Trailing</span>}
+        />,
+      );
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  it('should render correctly with a "className" attribute', () => {
+    const { asFragment } = render(<TestChip className="custom-class" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/bpk-component-chip/src/BpkSelectableChip.module.scss

@@ -0,0 +1,23 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index.scss';
+
+.bpk-chip {
+  @include bpk-chip;
+}

package/bpk-component-chip/src/BpkSelectableChip.tsx

@@ -0,0 +1,81 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkSelectableChip.module.scss';
+import type { CommonProps } from './commonTypes';
+import { CHIP_TYPES } from './commonTypes';
+
+const getClassName = cssModules(STYLES);
+
+export interface Props extends CommonProps {
+  role?: string;
+  trailingAccessoryView?: ReactNode;
+}
+
+const BpkSelectableChip = ({
+  accessibilityLabel,
+  children,
+  className,
+  disabled = false,
+  leadingAccessoryView = null,
+  role = 'checkbox',
+  selected = false,
+  trailingAccessoryView = null,
+  type = CHIP_TYPES.default,
+  ...rest
+}: Props) => {
+  const classNames = getClassName(
+    'bpk-chip',
+    `bpk-chip--${type}`,
+    disabled && 'bpk-chip--disabled',
+    disabled && `bpk-chip--${type}-disabled`,
+    !disabled && selected && `bpk-chip--${type}-selected`,
+    className,
+  );
+
+  return (
+    <button
+      aria-checked={role === 'button' ? undefined : selected}
+      className={classNames}
+      disabled={disabled}
+      role={role}
+      title={accessibilityLabel}
+      type="button"
+      {...rest}
+    >
+      {leadingAccessoryView && (
+        <span className={getClassName('bpk-chip__leading-accessory-view')}>
+          {leadingAccessoryView}
+        </span>
+      )}
+      <BpkText textStyle={TEXT_STYLES.footnote}>{children}</BpkText>
+      {trailingAccessoryView && (
+        <span className={getClassName('bpk-chip__trailing-accessory-view')}>
+          {trailingAccessoryView}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default BpkSelectableChip;

package/bpk-component-chip/src/accessibility-test.tsx

@@ -0,0 +1,47 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import BpkDismissibleChip from './BpkDismissibleChip';
+import BpkSelectableChip from './BpkSelectableChip';
+
+describe('BpkDismissibleChip accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkDismissibleChip onClick={() => null} accessibilityLabel="Dismiss">
+        Dismiss me
+      </BpkDismissibleChip>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe('BpkSelectableChip accessibility tests', () => {
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkSelectableChip onClick={() => null} accessibilityLabel="Toggle">
+        Toggle me
+      </BpkSelectableChip>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

package/bpk-component-chip/src/commonTypes.ts

@@ -0,0 +1,61 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
+
+export const CHIP_TYPES = {
+  default: 'default',
+  onDark: 'on-dark',
+  onImage: 'on-image',
+} as const;
+
+// onClick and children are already part of the button props, but we need to specify that they are required
+interface ButtonProps extends Omit<ComponentProps<'button'>, 'type'> {
+  onClick: (event: SyntheticEvent<HTMLButtonElement>) => void | null;
+  children: ReactNode | string;
+  type?: (typeof CHIP_TYPES)[keyof typeof CHIP_TYPES]; // this is different from the native button type
+}
+export interface CommonProps extends ButtonProps {
+  accessibilityLabel: string;
+  disabled?: boolean;
+  selected?: boolean;
+  leadingAccessoryView?: ReactNode;
+}
+
+// TODO: Remove once chip examples have been migrated to TS
+export const COMMON_PROP_TYPES = {
+  accessibilityLabel: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  leadingAccessoryView: PropTypes.node,
+  selected: PropTypes.bool,
+  trailingAccessoryView: PropTypes.node,
+  type: PropTypes.oneOf(Object.values(CHIP_TYPES)),
+};
+
+// TODO: Remove once chip examples have been migrated to TS
+export const COMMON_DEFAULT_PROPS = {
+  disabled: false,
+  leadingAccessoryView: null,
+  selected: false,
+  trailingAccessoryView: null,
+  type: CHIP_TYPES.default,
+};

package/bpk-component-chip/src/themeAttributes-test.ts

@@ -0,0 +1,34 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import themeAttributes from './themeAttributes';
+
+describe('themeAttributes', () => {
+  it('exports the expected attributes', () => {
+    expect(themeAttributes).toEqual([
+      'chipDefaultSelectedBackgroundColor',
+      'chipDefaultSelectedTextColor',
+      'chipOnDarkSelectedBackgroundColor',
+      'chipOnDarkSelectedTextColor',
+      'chipOnImageSelectedBackgroundColor',
+      'chipOnImageSelectedHoverBackgroundColor',
+      'chipOnImageSelectedActiveBackgroundColor',
+      'chipOnImageSelectedTextColor',
+    ]);
+  });
+});

package/bpk-component-chip/src/themeAttributes.ts

@@ -0,0 +1,28 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+  'chipDefaultSelectedBackgroundColor',
+  'chipDefaultSelectedTextColor',
+  'chipOnDarkSelectedBackgroundColor',
+  'chipOnDarkSelectedTextColor',
+  'chipOnImageSelectedBackgroundColor',
+  'chipOnImageSelectedHoverBackgroundColor',
+  'chipOnImageSelectedActiveBackgroundColor',
+  'chipOnImageSelectedTextColor',
+];