How to use @synerise/ds-tags - 10 common examples

onSelectedChange={tags => {
              console.log('Selected tags change', tags);
              setSelected(tags);
            }}
            manageLink={withManageLink && 'https://en.wikipedia.org/wiki/San_Escobar'}
          />
        

        <div style="{{padding:">
          <h4>Tag shapes</h4>
          <div style="{{display:">
            
            

            
            

            
            

            
            

            
            
            
            
          </div>
        </div>
      
    );
  },

setTags([...tags, tag]);
              setSelected([...selected, tag]);
            }}
            onSelectedChange={tags => {
              console.log('Selected tags change', tags);
              setSelected(tags);
            }}
            manageLink={withManageLink && 'https://en.wikipedia.org/wiki/San_Escobar'}
          />
        

        <div style="{{padding:">
          <h4>Tag shapes</h4>
          <div style="{{display:">
            
            

            
            

            
            

            
            

            
            
            
            
          </div></div>

{
    id: "00000000-0000-0000-0000-000000000000",
    name: "Position 0",
    canAdd: true,
    canUpdate: false,
    canDelete: false,
    tag: ,
    content: <div>content</div>,
  },
  {
    id: "00000000-0000-0000-0000-000000000002",
    name: "Position 1",
    canAdd: true,
    canUpdate: true,
    canDelete: true,
    tag: ,
    content: <div>content</div>,
  },
  {
    id: "00000000-0000-0000-0000-000000000001",
    name: "Position 2",
    canAdd: true,
    canUpdate: true,
    canDuplicate: true,
    canDelete: true,
    icon: ,
  }
];


describe('ManageableList with content items', () =&gt; {
  it('should render empty list', () =&gt; {

const Status: React.FC = ({ type, onClick, className, label }) => {
  return (
    
  );
};

default: () => {
    const IMAGE_URL = 'https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-reddit-square2-512.png';

    const shapes = {
      'Default Round': TagShape.DEFAULT_ROUND,
      'Default Square': TagShape.DEFAULT_SQUARE,
      'Small Round': TagShape.SMALL_ROUND,
      'Small Square': TagShape.SMALL_SQUARE,
      'Status Neutral': TagShape.STATUS_NEUTRAL,
      'Status Success': TagShape.STATUS_SUCCESS,
      'Status Error': TagShape.STATUS_ERROR,
      'Status Warning': TagShape.STATUS_WARNING,
    };

    const shape = select('Shape', shapes, shapes['Default Round']);
    const removable = boolean('Ability to remove', true);
    const addable = boolean('Ability to add', true);
    const creatable = boolean('Ability to create', true);
    const withManageLink = boolean('With manage tags link', true);
    const disabled = boolean('Disable entire group', false);

    const randomColorPool = [
      '#699788',
      '#6676e4',
      '#c3f424',

<div style="{{padding:">
          <h4>Tag shapes</h4>
          <div style="{{display:">
            
            

            
            

            
            

            
            

            
            
            
            
          </div>
        </div>
      
    );
  },
};

default: () => {
    const IMAGE_URL = 'https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-reddit-square2-512.png';

    const shapes = {
      'Default Round': TagShape.DEFAULT_ROUND,
      'Default Square': TagShape.DEFAULT_SQUARE,
      'Small Round': TagShape.SMALL_ROUND,
      'Small Square': TagShape.SMALL_SQUARE,
      'Status Neutral': TagShape.STATUS_NEUTRAL,
      'Status Success': TagShape.STATUS_SUCCESS,
      'Status Error': TagShape.STATUS_ERROR,
      'Status Warning': TagShape.STATUS_WARNING,
    };

    const shape = select('Shape', shapes, shapes['Default Round']);
    const removable = boolean('Ability to remove', true);
    const addable = boolean('Ability to add', true);
    const creatable = boolean('Ability to create', true);
    const withManageLink = boolean('With manage tags link', true);
    const disabled = boolean('Disable entire group', false);

default: () => {
    const IMAGE_URL = 'https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-reddit-square2-512.png';

    const shapes = {
      'Default Round': TagShape.DEFAULT_ROUND,
      'Default Square': TagShape.DEFAULT_SQUARE,
      'Small Round': TagShape.SMALL_ROUND,
      'Small Square': TagShape.SMALL_SQUARE,
      'Status Neutral': TagShape.STATUS_NEUTRAL,
      'Status Success': TagShape.STATUS_SUCCESS,
      'Status Error': TagShape.STATUS_ERROR,
      'Status Warning': TagShape.STATUS_WARNING,
    };

    const shape = select('Shape', shapes, shapes['Default Round']);
    const removable = boolean('Ability to remove', true);
    const addable = boolean('Ability to add', true);
    const creatable = boolean('Ability to create', true);
    const withManageLink = boolean('With manage tags link', true);
    const disabled = boolean('Disable entire group', false);

    const randomColorPool = [

<div style="{{padding:">
          <h4>Tag shapes</h4>
          <div style="{{display:">
            
            

            
            

            
            

            
            

            
            
            
            
          </div>
        </div>
      
    );
  },
};

default: () => {
    const IMAGE_URL = 'https://cdn4.iconfinder.com/data/icons/social-messaging-ui-color-shapes-2-free/128/social-reddit-square2-512.png';

    const shapes = {
      'Default Round': TagShape.DEFAULT_ROUND,
      'Default Square': TagShape.DEFAULT_SQUARE,
      'Small Round': TagShape.SMALL_ROUND,
      'Small Square': TagShape.SMALL_SQUARE,
      'Status Neutral': TagShape.STATUS_NEUTRAL,
      'Status Success': TagShape.STATUS_SUCCESS,
      'Status Error': TagShape.STATUS_ERROR,
      'Status Warning': TagShape.STATUS_WARNING,
    };

    const shape = select('Shape', shapes, shapes['Default Round']);
    const removable = boolean('Ability to remove', true);
    const addable = boolean('Ability to add', true);
    const creatable = boolean('Ability to create', true);
    const withManageLink = boolean('With manage tags link', true);
    const disabled = boolean('Disable entire group', false);

    const randomColorPool = [
      '#699788',