Merge pull request #42 from Kyzegs/master

Create component for language flags
tnovau · Aug 28, 2023 · 7f2a485 · 7f2a485
2 parents 583c7b1 + 055d560
commit 7f2a485
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,15 @@ export const SpanishFlag = () => <CircleFlag countryCode="es" height="35" cdnUrl
 
 You can pass all the react's `React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>` props to CircleFlag. :rocket:
 
+### Language flags
+
+```jsx
+import React from 'react'
+import { CircleFlagLanguage } from 'react-circle-flags'
+
+export const EnglishFlag = () => <CircleFlagLanguage countryCode="en-us" height="35" />
+```
+
 ## Docs && Gallery
 
 Click [here](https://tnovau.github.io/react-circle-flags/)!

diff --git a/index.d.ts b/index.d.ts
@@ -1,27 +1,45 @@
-import { DetailedHTMLProps, ImgHTMLAttributes } from "react";
-
-interface CircleFlagProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
-  /**
-   * Country code of flag.
-   */
-  countryCode: string;
-  /**
-   * Custom CDN URL to use.
-   */
-  cdnUrl?: string;
-}
-
-/**
- *
- * Demos:
- * - https://tnovau.github.io/react-circle-flags/gallery
- *
- * Docs:
- * - https://tnovau.github.io/react-circle-flags/
- */
-declare function CircleFlag(props: CircleFlagProps): JSX.Element;
-
-declare var countries: Record<string, boolean>;
-
-export { CircleFlag, CircleFlagProps, countries }
-
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react'
+
+interface CircleFlagProps extends DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
+  /**
+   * Country code of flag.
+   */
+  countryCode: string
+  /**
+   * Custom CDN URL to use.
+   */
+  cdnUrl?: string
+}
+
+interface CircleFlagLanguageProps extends DetailedHTMLProps<
+  ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
+  /**
+   * Language code of flag.
+   */
+  languageCode: string
+  /**
+   * Custom CDN URL to use.
+   */
+  cdnUrl?: string
+}
+
+/**
+ *
+ * Demos:
+ * - https://tnovau.github.io/react-circle-flags/gallery
+ *
+ * Docs:
+ * - https://tnovau.github.io/react-circle-flags/
+ */
+declare function CircleFlag(props: CircleFlagProps): JSX.Element
+declare function CircleFlagLanguage(props: CircleFlagLanguageProps): JSX.Element
+
+declare var countries: Record<string, boolean>
+declare var languages: Record<string, boolean>
+
+export { CircleFlag, CircleFlagProps, countries, languages }
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import countries from './countries'
+import languages from './languages'
 
 const CDN_URL = 'https://hatscripts.github.io/circle-flags/flags/'
 const FILE_SUFFIX = 'svg'
@@ -8,15 +9,16 @@ const UNKNOWN_FLAG = 'xx'
 const DEFAULT_HEIGHT = 100
 
 /**
- * @param {string} countryCode
+ * @param {string} code
  * @param {string} cdnUrl
- * @param {Omit<import('../index').CircleFlagProps, "countryCode" | "cdnUrl">} otherProps
+ * @param {DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>} otherProps
+ * @param {string} cdnSuffix
  */
-const getSvgProps = (countryCode, cdnUrl, otherProps) => ({
+const getSvgProps = (code, cdnUrl, otherProps, cdnSuffix = '') => ({
   ...otherProps,
-  title: otherProps.title || countryCode,
+  title: otherProps.title || code,
   height: otherProps.height || DEFAULT_HEIGHT,
-  src: `${cdnUrl || CDN_URL}${countryCode}.${FILE_SUFFIX}`
+  src: `${cdnUrl || CDN_URL}${cdnSuffix}${code}.${FILE_SUFFIX}`
 })
 
 /**
@@ -25,6 +27,9 @@ const getSvgProps = (countryCode, cdnUrl, otherProps) => ({
 const parseCountryCode = (countryCode) =>
   countries[countryCode] ? countryCode : UNKNOWN_FLAG
 
+const parseLanguageCode = (languageCode) =>
+  languages[languageCode] ? languageCode : UNKNOWN_FLAG
+
 /**
  * @param {import('../index').CircleFlagProps} param0
  */
@@ -39,4 +44,19 @@ export const CircleFlag = ({ countryCode, cdnUrl, ...otherProps }) => (
   />
 )
 
-export { countries }
+/**
+ * @param {import('../index').CircleFlagLanguage} param0
+ */
+export const CircleFlagLanguage = ({ languageCode, cdnUrl, ...otherProps }) => (
+  <img
+    data-testid='circle-language-flag'
+    {...getSvgProps(
+      parseLanguageCode(languageCode).toLowerCase(),
+      cdnUrl,
+      otherProps,
+      'language/'
+    )}
+  />
+)
+
+export { countries, languages }
diff --git a/src/index.test.js b/src/index.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { CircleFlag } from '.'
+import { CircleFlag, CircleFlagLanguage } from '.'
 
 describe('CircleFlag', () => {
   it('should render correctly with defaults', () => {
@@ -56,3 +56,33 @@ describe('CircleFlag', () => {
     expect(countryFlag.getAttribute('height')).toBe('35')
   })
 })
+
+describe('CircleFlagLanguage', () => {
+  it('should render correctly with defaults', () => {
+    const { getByTestId } = render(<CircleFlagLanguage />)
+    const languageFlag = getByTestId('circle-language-flag')
+    expect(languageFlag).toBeInTheDocument()
+    expect(languageFlag.getAttribute('src')).toBe(
+      'https://hatscripts.github.io/circle-flags/flags/language/xx.svg'
+    )
+    expect(languageFlag.title).toBe('xx')
+    expect(languageFlag.getAttribute('height')).toBe('100')
+  })
+
+  it('should render correctly with props', () => {
+    const { getByTestId } = render(
+      <CircleFlagLanguage
+        languageCode='en-us'
+        height='35'
+        title='United States'
+      />
+    )
+    const languageFlag = getByTestId('circle-language-flag')
+    expect(languageFlag).toBeInTheDocument()
+    expect(languageFlag.getAttribute('src')).toBe(
+      'https://hatscripts.github.io/circle-flags/flags/language/en-us.svg'
+    )
+    expect(languageFlag.title).toBe('United States')
+    expect(languageFlag.getAttribute('height')).toBe('35')
+  })
+})
diff --git a/src/languages.js b/src/languages.js
@@ -0,0 +1,198 @@
+export default {
+  aa: true,
+  ab: true,
+  af: true,
+  ak: true,
+  am: true,
+  an: true,
+  ar: true,
+  as: true,
+  av: true,
+  ay: true,
+  az: true,
+  ba: true,
+  be: true,
+  bg: true,
+  bi: true,
+  bm: true,
+  bn: true,
+  bo: true,
+  br: true,
+  bs: true,
+  ca: true,
+  ce: true,
+  ceb: true,
+  ch: true,
+  chm: true,
+  ckb: true,
+  co: true,
+  cs: true,
+  cv: true,
+  cy: true,
+  da: true,
+  de: true,
+  dv: true,
+  dz: true,
+  ee: true,
+  el: true,
+  'en-au': true,
+  'en-ca': true,
+  'en-gh': true,
+  'en-hk': true,
+  'en-ie': true,
+  'en-in': true,
+  'en-ke': true,
+  'en-ng': true,
+  'en-nz': true,
+  'en-ph': true,
+  'en-sg': true,
+  'en-tz': true,
+  'en-us': true,
+  'en-za': true,
+  en: true,
+  eo: true,
+  'es-mx': true,
+  es: true,
+  et: true,
+  eu: true,
+  fa: true,
+  fi: true,
+  filenames_without_extensions: true,
+  fj: true,
+  fo: true,
+  fr: true,
+  fy: true,
+  ga: true,
+  gd: true,
+  gl: true,
+  gn: true,
+  gu: true,
+  gv: true,
+  ha: true,
+  haw: true,
+  he: true,
+  hi: true,
+  hmn: true,
+  ho: true,
+  hr: true,
+  ht: true,
+  hu: true,
+  hy: true,
+  ia: true,
+  id: true,
+  ie: true,
+  ig: true,
+  ilo: true,
+  interslavic: true,
+  io: true,
+  is: true,
+  it: true,
+  ja: true,
+  jv: true,
+  ka: true,
+  kg: true,
+  ki: true,
+  kk: true,
+  kl: true,
+  km: true,
+  kn: true,
+  ko: true,
+  kr: true,
+  kri: true,
+  ks: true,
+  ku: true,
+  kv: true,
+  kw: true,
+  ky: true,
+  la: true,
+  lb: true,
+  lg: true,
+  ln: true,
+  lo: true,
+  lt: true,
+  lu: true,
+  lus: true,
+  lv: true,
+  mg: true,
+  mh: true,
+  mi: true,
+  mk: true,
+  ml: true,
+  mn: true,
+  mni: true,
+  mr: true,
+  mrj: true,
+  ms: true,
+  mt: true,
+  my: true,
+  na: true,
+  nb: true,
+  nd: true,
+  ne: true,
+  nl: true,
+  nn: true,
+  no: true,
+  non: true,
+  nr: true,
+  ny: true,
+  oc: true,
+  om: true,
+  or: true,
+  os: true,
+  oto: true,
+  pa: true,
+  pap: true,
+  pl: true,
+  ps: true,
+  'pt-br': true,
+  pt: true,
+  qu: true,
+  rm: true,
+  rn: true,
+  ro: true,
+  ru: true,
+  rw: true,
+  sc: true,
+  sd: true,
+  se: true,
+  sg: true,
+  si: true,
+  sk: true,
+  sl: true,
+  sm: true,
+  sn: true,
+  so: true,
+  sq: true,
+  sr: true,
+  ss: true,
+  st: true,
+  su: true,
+  sv: true,
+  sw: true,
+  ta: true,
+  te: true,
+  tg: true,
+  th: true,
+  ti: true,
+  tk: true,
+  tl: true,
+  tn: true,
+  to: true,
+  tr: true,
+  tt: true,
+  ty: true,
+  udm: true,
+  ug: true,
+  uk: true,
+  ur: true,
+  uz: true,
+  vi: true,
+  vo: true,
+  xh: true,
+  xx: true,
+  yi: true,
+  yo: true,
+  yua: true,
+  zh: true,
+  zu: true
+}