How to use @commercetools-uikit/design-system - 10 common examples

const ModalPageTopBar = (props: Props) => {
  const intl = useIntl();
  return (
    <div is="">
      </div>

rendered.getByTestId('quick-access-search-input')
    );

    const searchInput = rendered.getByTestId('quick-access-search-input');

    // create first history entry
    fireEvent.change(searchInput, { target: { value: 'party-parrot' } });
    await waitForElement(() =>
      rendered.getByText('Show Product "party-parrot"')
    );

    expect(
      rendered.queryByTestId(
        'quick-access-result(go/product-by-key/product(party-parrot-id))'
      )
    ).toHaveStyle(`color: ${customProperties.colorSurface};`);
  });

const getContentWrapperStyles = (props, theme) => {
  const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return css`
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    border-radius: ${overwrittenVars[designTokens.borderRadiusForTag]};
    padding: 5px ${vars.spacingS};
    white-space: normal;
    text-align: left;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    border-style: solid;
    border-width: 1px;
    border-color: ${props.type === 'warning'
      ? overwrittenVars[designTokens.borderColorForTagWarning]
      : overwrittenVars[designTokens.borderColorForTag]};

    /* fixing things for IE11 ... */
    width: 100%;

    small {
      color: ${getTextDetailColor(props.isDisabled, theme)};

case 'm':
      return vars.constraintM;
    case 'l':
      return vars.constraintL;
    case 'xl':
      return vars.constraintXl;
    case 'scale':
    default:
      return vars.constraintScale;
  }
};

export const Body = styled.div`
  font-family: inherit;
  border-radius: ${vars.borderRadius6};
  padding: ${vars.spacingXs} ${vars.spacingS};
  border: 'none';
  box-shadow: ${vars.shadow15};
  font-size: 0.857rem;
  opacity: 0.95;
  color: ${vars.colorSurface};
  background-color: ${vars.colorAccent};
`;
// here we use object styles so we can spread these
// with the styles we get from react-popper :D
// eslint-disable-next-line import/prefer-default-export
export const getBodyStyles = ({ constraint, placement, customStyles }) => ({
  fontFamily: 'inherit',
  margin: `${getOffsetMargin({ placement })} !important`,
  maxWidth: getMaxWidth({ constraint }),
  // so hovering over the tooltip when the tooltip overlaps the component
  pointerEvents: 'none',

import styled from '@emotion/styled';
import { customProperties } from '@commercetools-uikit/design-system';

// The overflow should be "auto", to make the container scrollable
const DialogContent = styled.div`
  border-top: 1px solid ${customProperties.colorNeutral};
  padding: ${customProperties.spacingM} 0 ${customProperties.spacingS};
  flex: 1;
  overflow: auto;
`;

export default DialogContent;

const ModalPageTopBar = (props: Props) => {
  const intl = useIntl();
  return (

const getInputStyles = () => css`
  width: 100%;
  text-align: center;
  border: 0;
  border-top: 1px solid ${vars.colorNeutral90};
  padding: 10px 0;
  outline: 0;
  font-size: ${vars.fontSizeDefault};
  margin-top: ${vars.spacingS};
  color: ${vars.colorSolid};

  :disabled {
    /* Fixes background color in Firefox */
    background-color: ${vars.colorSurface};
  }
`;
const DateCalendarTimeInput = props => (

`;

  switch (props.domain) {
    case NOTIFICATION_DOMAINS.GLOBAL:
      return css`
        ${pageStyles};
        background-color: ${getColorByType(props.type)};
      `;
    case NOTIFICATION_DOMAINS.PAGE:
      return pageStyles;
    case NOTIFICATION_DOMAINS.SIDE: {
      const sideStyles = css`
        ${baseStyles};
        animation: ${showNotificationAnimation} 0.3s forwards;
        padding: ${customProperties.spacingM} ${customProperties.spacingM}
          ${customProperties.spacingM} 50px !important;
        text-align: left;
        background: ${customProperties.colorSurface};
        border: 1px solid ${getColorByType(props.type)};
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
        border-radius: ${customProperties.borderRadius6};
        word-break: break-word;
        hyphens: auto; /* still not supported on Chrome */
      `;

      if (props.fixed) return sideStyles;
      return css`
        ${sideStyles};
        animation: ${showNotificationSideAnimation} 0.3s forwards;
        position: relative;
        z-index: 10000;
        margin-top: ${customProperties.spacingL} !important;

Two resource that explain why we need the min-width: 0; here
      By default, min-width is set to 'auto'. That means that this flex-child is not
      allowed to grow any smaller than the longest text inside. So it will stretch
      no matter how you set the flex-grow property
      To fix this you need to set min-width to 0. This tells the flex-child that
      it is ok to be narrower than the longest word inside
      https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
      https://css-tricks.com/flexbox-truncated-text/
    */

    min-width: 0;

    > * + * {
      /* would have loved to use Spacings.Inline here but that would require a
    complete overhaul of this components' structure */
      margin: 0 0 0 ${vars.spacingM};
    }
  `;
  if (isDisabled) {
    return [
      baseStyles,
      css`
        cursor: default;
      `,
      !isCondensed &&
        css`
          /**
           We set a min-height of 32px to anticipate use-cases where SecondaryButton or PrimaryButton
           are rendered in the headerControl */
          min-height: ${vars.spacingXl};
        `,
    ];

import { customProperties } from '@commercetools-uikit/design-system';
import Section from '../../../.storybook/decorators/section';
import Spacings from '../spacings';
import Text from '../typography/text';
import Readme from './README.md';
import Grid from './grid';

const createList = size =>
  Array.from({ length: size }).map((_, index) => index + 1);

const Placeholder = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
  padding: ${customProperties.spacingM};
`;

const renderGridElements = () => {
  const elems = select('Num. of grid elements', createList(20), 6);
  return createList(elems).map((el, index) => (
    
      {el}
    
  ));
};

storiesOf('Examples|Components/Grid', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      // Show readme at the addons panel