@edvisor/product-language 0.10.2 → 0.10.3

package/src/lib/components/flag/flag.test.tsx

@@ -1,65 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { Flag } from './index'
-
-describe('Flag Tests', () => {
-  describe('Flag Tests', () => {
-    it('should render the flag', async () => {
-      render(
-        <Flag code='CA'/>
-      )
-
-      const flag = screen.getByRole('img')
-
-      expect(flag.closest('i')).toBeInTheDocument()
-      expect(flag).toBeInTheDocument()
-      
-    })
-
-    it('should render the large flag', async () => {
-      render(
-        <Flag large code='CA'/>
-      )
-
-      const flag = screen.getByRole('img')
-
-      expect(flag).toBeInTheDocument()
-      expect(flag).toHaveStyle({width: '32px', height: '24px'})
-      
-    })
-
-    it('should render the medium flag', async () => {
-        render(
-          <Flag medium code='CA'/>
-        )
-  
-        const flag = screen.getByRole('img')
-  
-        expect(flag).toBeInTheDocument()
-        expect(flag).toHaveStyle({width: '20px', height: '20px'})
-        
-    })
-
-    it('should apply a class to the container', async () => {
-        render(
-          <Flag medium code='CA' className='foo'/>
-        )
-  
-        const flag = screen.getByRole('img')
-  
-        expect(flag.closest('i')).toHaveClass('foo')
-        
-    })
-
-    it('should apply styles to the container', async () => {
-        render(
-          <Flag medium code='CA' style={{display: 'block'}}/>
-        )
-  
-        const flag = screen.getByRole('img')
-  
-        expect(flag.closest('i')).toHaveStyle({display: 'block'})
-        
-    })
-
-  })
-})

package/src/lib/components/flag/flag.tsx

@@ -1,97 +0,0 @@
-import { FC } from '@helpers'
-import { HTMLAttributes } from 'react'
-import styled, { css } from 'styled-components'
-import { FlagProps, FlagSize, getHeigthBySize, getFlagSize, getWidthBySize } from './flag-size-flags'
-import { CountryCodes, LargeFlags, MediumFlags, SmallFlags } from './flag.list'
-
-const getCoordsStyles = (props :FlagProps) => {
-  switch (getFlagSize(props)) {
-    case FlagSize.large:
-      return css`
-        & .coords {
-          width: 32px;
-          height: 24px;
-          x: 0;
-          y: 0;
-        }`
-    case FlagSize.medium:
-      return css`
-        & .coords {
-          width: 20px;
-          height: 16px;
-          x: 0;
-          y: 2;
-        }`
-    case FlagSize.small: 
-      return css`
-        & .coords {
-          width: 16px;
-          height: 12px;
-          x: 2;
-          y: 4;
-        }`
-  }
-}
-
-const BoundingBox = styled.i<{props: FlagProps}>`
-  width: ${({ props }) => getWidthBySize(props)}px;
-  height: ${({ props }) => getHeigthBySize(props)}px;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  position: relative;
-`
-
-const Svg = styled.svg.attrs<IProps>(({props}) => ({
-  viewBox: `0 0 ${getWidthBySize(props)} ${getHeigthBySize(props)}`
-}))<{ props: FlagProps}>`
-  position: absolute;
-  width: ${({ props }) => getWidthBySize(props)}px;
-  height: ${({ props }) => getHeigthBySize(props)}px;
-  fill: none;
-  top: calc(50% - ${({ props }) => getHeigthBySize(props)}px/2);
-  left: calc(50% - ${({ props }) => getWidthBySize(props)}px/2);
-  ${({ props }) => getCoordsStyles(props)}
-`
-
-interface IFlagProperties extends HTMLAttributes<SVGElement> {
-  code: CountryCodes;
-}
-interface IProps {
-  props: IFlagProperties & FlagProps
-}
-
-const getFlagPathByCode = (props :IFlagProperties) => {
-
-  switch (getFlagSize(props)) {
-    case FlagSize.small:
-      return SmallFlags[props.code]
-    case FlagSize.medium:
-      return MediumFlags[props.code]
-    case FlagSize.large:
-      return LargeFlags[props.code]
-    default:
-      return SmallFlags[props.code]
-  }
-}
-
-export const Flag: FC<IFlagProperties & FlagProps> = (props) => {
-  return (
-    <BoundingBox 
-      className={props.className} 
-      style={props.style}
-      props={props}>
-      <Svg
-        props={props}>
-        {getFlagPathByCode(props)}
-      </Svg>
-    </BoundingBox>
-  )
-}
-
-Svg.defaultProps = {
-  fill: 'none', 
-  role: 'img',
-  xmlns: 'http://www.w3.org/2000/svg'
-}
-

package/src/lib/components/flag/index.tsx

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

package/src/lib/components/flag/stories/components.tsx

@@ -1,403 +0,0 @@
-import { Borders, Padding, Surface, Text, Typography } from '@foundations'
-import { is } from '@helpers'
-import { Label } from 'components/typography'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Flag } from  '../flag'
-import { PlayGroundSelect } from  './playGround-select'
-import { CountryCodes } from '../flag.list'
-import styled from 'styled-components'
-
-const Table = styled.div`
-  background: ${Surface.Default};
-  border-radius: 6px;
-`
-
-const Row = styled.div<{ gray?: boolean }>`
-  display: flex;
-  flex-direction: row;
-  background-color: ${(props) => (is(props.gray) ? Surface.Default.Subdued : Surface.Default)};
-  border-bottom: 1px solid ${Borders.Default.Subdued};
-`
-
-const Column = styled.div`
-  ${Typography.Body}
-  display: flex;
-  padding: ${Padding.l};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  justify-content: space-between;
-  &:nth-child(1) {
-    flex: 2;
-  }
-`
-
-const HeaderColumn = styled(Column)`
-  color: ${Text.Subdued};
-`
-
-export const FlagWrapper = styled.div`
-  display: flex;
-  gap: 25px;
-`
-
-type ICountryList = {
-  [key in CountryCodes]: string
-}
-
-const FlagListHeader = () => (
-  <Row gray>
-    <HeaderColumn><Label subdued>Country Name</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Alpha-2 Code</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Flag</Label></HeaderColumn>
-  </Row>
-)
-
-const FlagsExampleHeader = () => (
-  <Row gray>
-    <HeaderColumn><Label subdued>Large</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Medium</Label></HeaderColumn>
-    <HeaderColumn><Label subdued>Small</Label></HeaderColumn>
-  </Row>
-)
-
-export const FlagList  = () => {
-  
-  return (
-    <Table>
-      <FlagListHeader/>
-      {
-        (Object.keys(CountryList) as (CountryCodes)[]).map((code, index) =>
-          <Row key={index}>
-            <Column>
-              {CountryList[code]}
-            </Column>
-            <Column>
-              {code}
-            </Column>
-            <Column>
-              <FlagWrapper>
-                <Flag large code={code} />
-                <Flag medium code={code} />
-                <Flag small code={code} />
-              </FlagWrapper>
-            </Column>
-          </Row>
-        )
-      }
-    </Table> 
-  )
-}
-
-export const FlagsExample = () => {
-  
-  return (<Playground
-    code={`
-      const list = (Object.keys(CountryList) as (CountryCodes)[])
-        .map(code => ({code: code, value: CountryList[code]}));
-
-      const [selected, setSelected] = useState('CA');
-
-      <form onSubmit={(e) => e.preventDefault()}>
-        <Row style={{height: '225px'}}>
-          <Column style={{display: 'block'}}>
-            <PlayGroundSelect 
-              label="Choose country" 
-              values={list} 
-              handleChangeEvent={(code) => setSelected(code)} 
-            />
-          </Column>
-          <Column style={{flex: 4}}>
-            <Table style={{width: '100%'}}>
-              <FlagsExampleHeader/>
-              <Row>
-                <Column>
-                  <Flag large code={selected} />
-                </Column>
-                <Column>
-                  <Flag medium code={selected} />
-                </Column>
-                <Column>
-                  <Flag small code={selected} />
-                </Column>
-              </Row>
-            </Table>
-          </Column>
-        </Row>
-      </form>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Flag,
-        Row,
-        Table,
-        Column,
-        FlagsExampleHeader,
-        CountryList,
-        PlayGroundSelect,
-      },
-    }}
-  />)
-}
-
-const CountryList: ICountryList = {
-  'AD': 'Andorra',
-  'AE': 'United Arab Emirates',
-  'AF': 'Afghanistan',
-  'AG': 'Antigua and Barbuda',
-  'AI': 'Anguilla',
-  'AL': 'Albania',
-  'AM': 'Armenia',
-  'AO': 'Angola',
-  'AQ': 'Antarctica',
-  'AR': 'Argentina',
-  'AS': 'American Samoa',
-  'AT': 'Austria',
-  'AU': 'Australia',
-  'AW': 'Aruba',
-  'AX': 'Aland Islands',
-  'AZ': 'Azerbaijan',
-  'BA': 'Bosnia and Herzegovina',
-  'BB': 'Barbados',
-  'BD': 'Bangladesh',
-  'BE': 'Belgium',
-  'BF': 'Burkina Faso',
-  'BG': 'Bulgaria',
-  'BH': 'Bahrain',
-  'BI': 'Burundi',
-  'BJ': 'Benin',
-  'BL': 'Saint Barthélemy',
-  'BM': 'Bermuda',
-  'BN': 'Brunei Darussalam',
-  'BO': 'Bolivia',
-  'BQ-BO': 'Bonaire',
-  'BQ-SA': 'Saba',
-  'BQ-SE': 'Sint Eustatius',
-  'BR': 'Brazil',
-  'BS': 'Bahamas',
-  'BT': 'Bhutan',
-  'BV': 'Bouvet Island',
-  'BW': 'Botswana',
-  'BY': 'Belarus',
-  'BZ': 'Belize',
-  'CA': 'Canada',
-  'CC': 'Cocos (Keeling) Islands',
-  'CD': 'Democratic Republic of the Congo',
-  'CF': 'Central African Republic',
-  'CG': 'Republic of the Congo',
-  'CH': 'Switzerland',
-  'CI': 'Côte d\'Ivoire (Ivory Coast)',
-  'CK': 'Cook Islands',
-  'CL': 'Chile',
-  'CM': 'Cameroon',
-  'CN': 'China',
-  'CO': 'Colombia',
-  'CR': 'Costa Rica',
-  'CU': 'Cuba',
-  'CV': 'Cabo Verde',
-  'CW': 'Curaçao',
-  'CX': 'Christmas Island',
-  'CY': 'Cyprus',
-  'CZ': 'Czech Republic',
-  'DE': 'Germany',
-  'DJ': 'Djibouti',
-  'DK': 'Denmark',
-  'DM': 'Dominica',
-  'DO': 'Dominican Republic',
-  'DZ': 'Algeria',
-  'EC': 'Ecuador',
-  'EE': 'Estonia',
-  'EG': 'Egypt',
-  'EH': 'Western Sahara',
-  'ER': 'Eritrea',
-  'ES': 'Spain',
-  'ET': 'Ethiopia',
-  'FI': 'Finland',
-  'FJ': 'Fiji',
-  'FK': 'Falkland Islands',
-  'FM': 'Federated States of Micronesia',
-  'FO': 'Faroe Islands',
-  'FR': 'France',
-  'GA': 'Gabon',
-  'GB': 'England',
-  'GB-NIR': 'Northern Ireland',
-  'GB-SCT': 'Scotland',
-  'GB-UKM': 'United Kingdom',
-  'GB-WLS': 'Wales',
-  'GD': 'Grenada',
-  'GE': 'Georgia',
-  'GF': 'French Guiana',
-  'GG': 'Guernsey',
-  'GH': 'Ghana',
-  'GI': 'Gibraltar',
-  'GL': 'Greenland',
-  'GM': 'Gambia',
-  'GN': 'Guinea',
-  'GP': 'Guadeloupe',
-  'GP-FR': 'Guadeloupe',
-  'GQ': 'Equatorial Guinea',
-  'GR': 'Greece',
-  'GS': ' S. Georgia and S. Sandwich Islands',
-  'GT': 'Guatemala',
-  'GU': 'Guam',
-  'GW': 'Guinea-Bissau',
-  'GY': 'Guyana',
-  'HK': 'Hong Kong',
-  'HM': 'Heard and McDonald Islands',
-  'HN': 'Honduras',
-  'HR': 'Croatia (Hrvatska)',
-  'HT': 'Haiti',
-  'HU': 'Hungary',
-  'ID': 'Indonesia',
-  'IE': 'Ireland',
-  'IL': 'Isreal',
-  'IM': 'Isle of Man',
-  'IN': 'India',
-  'IO': 'British Indian Ocean Territory',
-  'IQ': 'Iraq',
-  'IR': 'Iran',
-  'IS': 'Iceland',
-  'IT': 'Italy',
-  'JE': 'Jersey',
-  'JM': 'Jamaica',
-  'JO': 'Jordan',
-  'JP': 'Japan',
-  'KE': 'Kenya',
-  'KG': 'Kyrgyzstan',
-  'KH': 'Cambodia',
-  'KI': ' Kiribati',
-  'KM': 'Comors',
-  'KN': 'Saint Kitts and Nevis',
-  'KP': 'Korea (North)',
-  'KR': 'Korea (South)',
-  'KW': 'Kuwait',
-  'KY': 'Cayman Islands',
-  'KZ': 'Kazakhstan',
-  'LA': 'Laos',
-  'LB': 'Lebanon',
-  'LC': 'Saint Lucia',
-  'LI': 'Liechtenstein',
-  'LK': 'Sri Lanka',
-  'LR': 'Liberia',
-  'LS': 'Lesotho',
-  'LT': 'Lithuania',
-  'LU': 'Luxembourg',
-  'LV': 'Latvia',
-  'LY': 'Libya',
-  'MA': 'Morocco',
-  'MC': 'Monaco',
-  'MD': 'Moldova',
-  'ME': 'Montenegro',
-  'MF': 'Saint Martin',
-  'MG': 'Madagascar',
-  'MH': 'Marshall Islands',
-  'MK': 'North Macedonia',
-  'ML': 'Mali',
-  'MM': 'Myanmar',
-  'MN': 'Mongolia',
-  'MO': 'Macao',
-  'MP': 'Northern Mariana Islands',
-  'MQ': 'Martinique',
-  'MQ-FR': 'Martinique',
-  'MR': 'Mauritania',
-  'MS': 'Montserrat',
-  'MT': 'Malta',
-  'MU': 'Mauritius',
-  'MV': 'Maldives',
-  'MW': 'Malawi',
-  'MX': 'Mexico',
-  'MY': 'Malaysia',
-  'MZ': 'Mozambique',
-  'NA': 'Namibia',
-  'NC': 'New Caledonia',
-  'NE': 'Niger',
-  'NF': 'Norfolk Island',
-  'NG': 'Nigeria',
-  'NI': 'Nicaragua',
-  'NL': 'Netherlands',
-  'NO': 'Norway',
-  'NP': 'Nepal',
-  'NR': 'Nauru',
-  'NU': 'Niue',
-  'NZ': 'New Zealand (Aotearoa)',
-  'OM': 'Oman',
-  'PA': 'Panama',
-  'PE': 'Peru',
-  'PF': 'French Polynesia',
-  'PG': 'Papua New Guinea',
-  'PH': 'Philippines',
-  'PK': 'Pakistan',
-  'PL': 'Poland',
-  'PM': 'St. Pierre & z',
-  'PM-FR': 'Saint Pierre and Miquelon',
-  'PN': 'Pitcairn Islands',
-  'PR': 'Puerto Rico',
-  'PS': 'Palestinian Territory',
-  'PT': 'Portugal',
-  'PW': 'Palau',
-  'PY': 'Paraguay',
-  'QA': 'Qatar',
-  'RE': 'Reunion',
-  'RO': 'Romania',
-  'RS': 'Serbia',
-  'RU': 'Russian Federation',
-  'RW': 'Rwanda',
-  'SA': 'Saudi Arabia',
-  'SB': 'Solomon Islands',
-  'SC': 'Seychelles',
-  'SD': 'Sudan',
-  'SE': 'Sweden',
-  'SG': 'Singapore',
-  'SH': 'Saint Helena',
-  'SI': 'Slovenia',
-  'SJ': 'Svalbard and Jan Mayen',
-  'SK': 'Slovakia',
-  'SL': 'Sierra Leone',
-  'SM': 'San Marino',
-  'SN': 'Senegal',
-  'SO': 'Somalia',
-  'SR': 'Suriname',
-  'SS': 'South Sudan',
-  'ST': 'Sao Tome and Principe',
-  'SV': 'El Salvador',
-  'SX': 'Sint Maarten',
-  'SY': 'Syria',
-  'SZ': 'Swaziland',
-  'TC': 'Turks and Caicos Islands',
-  'TD': 'Chad',
-  'TF': 'French Southern and Antarctic Lands',
-  'TG': 'Togo',
-  'TH': 'Thailand',
-  'TJ': 'Tajikistan',
-  'TK': 'Tokelau',
-  'TL': 'Timor-Leste',
-  'TM': 'Turkmenistan',
-  'TN': 'Tunisia',
-  'TO': 'Tonga',
-  'TR': 'Turkey',
-  'TT': 'Trinidad and Tobago',
-  'TV': 'Tuvalu',
-  'TW': 'Taiwan',
-  'TZ': 'Tanzania',
-  'UA': 'Ukraine',
-  'UG': 'Uganda',
-  'UM': 'United States Minor Outlying Islands',
-  'US': 'United States',
-  'UY': 'Uruguay',
-  'UZ': 'Uzbekistan',
-  'VA': 'Vatican City State',
-  'VC': 'Saint Vincent and the Grenadines',
-  'VE': 'Venezuela',
-  'VG': 'Virgin Islands (British)',
-  'VI': 'Virgin Islands (U.S.)',
-  'VN': 'Vietnam',
-  'VU': 'Vanuatu',
-  'WF': 'Wallis and Futuna',
-  'WS': 'Samoa',
-  'YE': 'Yemen',
-  'YT-UNF': 'Mayotte',
-  'ZA': 'South Africa',
-  'ZM': 'Zambia',
-  'ZW': 'Zimbabwe',
-}

package/src/lib/components/flag/stories/flag.stories.mdx

@@ -1,48 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Flag } from '../index'
-import { FlagList, FlagWrapper, FlagsExample } from './components'
-
-
-<Meta title="Components/Flag" component={Flag}/>
-
-# Flag System
-
-
-For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=4119%3A13858)
-
-## How to Use
-
-```tsx
-import { Flag } from '@edvisor/product-language'
-
-<Flag large code='BR' />
-```
-
-## API
-
-### `Flag` 
-Extends `HTMLAttributes<SVGElement>`
-
-| Prop       | Type                         | Description                                             |
-| ---------- | ---------------------------- | ------------------------------------------------------- |
-| `size`     | `string`                     | The size of the Flag (small \| medium \| large)         |
-| `code`     | `string`                     |  String (Country Alpha-2 code)                          |
-
-### Flags sizes
-| Size       | Description                                             |
-| ---------- | ------------------------------------------------------- |
-| Small      | 20x20 bounding box. Designed to be rendered at 16x12    |
-| Medium     | 20x20 bounding box. Designed to be rendered at 20x15    |
-| Large      | 32x24 bounding box. Designed to be rendered at 32x24    |
- 
-
-## PlayGround
-<FlagsExample/>
-
-
-### Flag List
-
-<Canvas>
-    <FlagList />
-</Canvas>
-