MOON-407: Add new component Pill (#409)

src/components/Dropdown/Dropdown.stories.jsx

@@ -3,6 +3,7 @@ import {action} from '@storybook/addon-actions';
 import markdownNotes from './Dropdown.md';
 import {Dropdown} from './index';
 import {Love} from '~/icons';
+import {Pill, Typography} from '~/components';
 import {
     dropdownData,
     dropdownDataDescriptions,
@@ -369,3 +370,49 @@ export const DropdownWithTreeMultiple = () => {
     );
 };
 
+export const DropdownWithPill = () => {
+    const [currentOption, setCurrentOption] = useState([]);
+
+    const dataLanguages = [
+        {
+            label: 'French',
+            value: 'fr',
+            iconEnd: <Pill label="FR"/>
+        },
+        {
+            label: <>French <Typography component="span" variant="caption" style={{color: 'darkgray'}}>(Canadian)</Typography></>,
+            value: 'fr_ca',
+            iconEnd: <Pill label="FR_CA"/>
+        },
+        {
+            label: <>Language with very long long label label label label label label label name <Typography component="span" variant="caption" style={{color: 'darkgray'}}>(country name)</Typography></>,
+            value: 'es',
+            iconEnd: <Pill label="ES"/>
+        },
+        {
+            label: 'English',
+            value: 'en',
+            iconEnd: <Pill label="EN"/>
+        }
+    ];
+
+    const handleOnChange = (e, item) => {
+        setCurrentOption(item);
+        action('onChange');
+        return true;
+    };
+
+    return (
+        <Dropdown
+            isReversed
+            icon={Object.keys(currentOption).length > 0 ? <Pill label={currentOption.value.toUpperCase()}/> : null}
+            label={currentOption.label}
+            placeholder="Select something"
+            value={currentOption.value}
+            size="small"
+            isDisabled={false}
+            data={dataLanguages}
+            onChange={(e, item) => handleOnChange(e, item)}
+        />
+    );
+};

src/components/ListItem/ListItem.scss

@@ -39,7 +39,7 @@ $big-image-size: 96px;
 .moonstone-listItem_iconEnd {
     display: flex;
     align-items: center;
-    width: 16px;
+    min-width: 16px;
     height: 16px;
 }
 

src/components/ListSelector/ValueList/ValueList.scss

@@ -5,8 +5,6 @@
 }
 
 .moonstone-iconContainer {
-    min-width: var(--spacing-large);
-
     .moonstone-displayNone {
         display: none;
     }

src/components/Pill/Pill.md

@@ -0,0 +1,4 @@
+The `Pill` component is a very simple variation of the `Chip` component.
+
+### Usages
+The `Pill` component must be used in a dropdownMenu to add information (eg: Add the code language in a language switcher)   

src/components/Pill/Pill.scss

@@ -0,0 +1,11 @@
+// empty
+.moonstone-pill {
+    padding: 0 var(--spacing-nano);
+
+    border-radius: 2px;
+    background-color: var(--color-gray_light40);
+
+    &.moonstone-pill_reversed {
+        color: var(--color-light);
+    }
+}

src/components/Pill/Pill.spec.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {render, screen} from '@testing-library/react';
+import {Pill} from './index';
+
+describe('Pill', () => {
+    it('should display label', () => {
+        render(<Pill label="Say my name"/>);
+        expect(screen.getByText('Say my name')).toBeInTheDocument();
+    });
+
+    it('should add additional class names', () => {
+        const testClassName = 'hello';
+        render(<Pill data-testid="moonstone-listItemChip" className={testClassName} label="Say my name"/>);
+        expect(screen.getByTestId('moonstone-listItemChip')).toHaveClass(testClassName);
+    });
+
+    it('should add additional attribute', () => {
+        render(<Pill data-testid="moonstone-listItemChip" label="Say my name"/>);
+        expect(screen.getByTestId('moonstone-listItemChip')).toBeInTheDocument();
+    });
+});

src/components/Pill/Pill.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Story} from '@storybook/react';
+import markdownNotes from './Pill.md';
+
+import {Pill} from './index';
+import type {PillProps} from './Pill.types';
+
+export default {
+    title: 'Components/Pill',
+    component: Pill,
+
+    parameters: {
+        layout: 'centered',
+        notes: {markdown: markdownNotes}
+    }
+};
+
+export const Default: Story<PillProps> = args => (
+    <Pill {...args}/>
+);
+Default.args = {
+    label: 'ListItem label'
+};

src/components/Pill/Pill.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import type {PillProps} from './Pill.types';
+
+import {Typography} from '~/components/Typography';
+import './Pill.scss';
+
+export const Pill: React.FC<PillProps> = ({
+    label,
+    className,
+    isReversed,
+    ...props
+}) => {
+    return (
+        <Typography
+            component="span"
+            variant="caption"
+            weight="semiBold"
+            className={clsx('moonstone-pill', {'moonstone-pill_reversed': isReversed}, className)}
+            {...props}
+        >
+            {label}
+        </Typography>
+    );
+};
+
+Pill.displayName = 'Pill';

src/components/Pill/Pill.types.ts

@@ -0,0 +1,16 @@
+export type PillProps = {
+    /**
+     * ListItem label
+     */
+    label: string;
+
+    /**
+     * Reversed style for dark background with light text
+     */
+    isReversed?: boolean;
+
+    /**
+     * Additional classname
+     */
+    className?: string;
+}

src/components/Pill/index.ts

@@ -0,0 +1 @@
+export * from './Pill';

src/components/index.ts

@@ -19,6 +19,7 @@ export * from './ListSelector';
 export * from './Loader';
 export * from './Menu';
 export * from './Paper';
+export * from './Pill';
 export * from './PrimaryNav';
 export * from './PrimaryNav/PrimaryNavItem';
 export * from './PrimaryNav/PrimaryNavItemsGroup';