fbredius/storybook

import React from 'react';
import { styled } from '@storybook/theming';

export default {
  title: 'Addons/Toolbars',
  parameters: {
    layout: 'centered',
  },
};

const getCaptionForLocale = (locale) => {
  switch (locale) {
    case 'es':
      return 'Hola!';
    case 'fr':
      return 'Bonjour!';
    case 'zh':
      return '你好!';
    case 'kr':
      return '안녕하세요!';
    case 'en':
    default:
      return 'Hello';
  }
};

export const Locale = (_args, { globals: { locale } }) => {
  return (
    <Themed>
      <div style={{ fontSize: 30 }}>Your locale is '{locale}', so I say:</div>
      <div style={{ fontSize: 14 }}>note: cycle backwards and forwards with "K" & "L"</div>
      <div style={{ fontSize: 60, fontWeight: 'bold' }}>{getCaptionForLocale(locale)}</div>
    </Themed>
  );
};

const Themed = styled.div(({ theme }) => ({
  color: theme.color.defaultText,
}));