@edvisor/product-language 0.2.0 → 0.3.0

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,97 @@
+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

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

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

@@ -0,0 +1,403 @@
+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

@@ -0,0 +1,48 @@
+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>
+