luna-one 3.1.593 → 3.1.595

package/dist/luna/components/ImageGallery/ImageGalleryDocumentation.mdx

@@ -0,0 +1,90 @@
+#### Block List Item
+
+###### Props -
+
+- `content` **(required)** - object containing cards, with following props
+  - `cards` - array containing objects for generating cards
+    - `eyebrow` - string for generating card eyebrow text
+    - `header` - string for generating card header text
+    - `text` - string for generating card body text
+    - `cardAlignment` - boolean for changing position of card image: image-top or image-bottom options toggled by `false` and `true` respectively
+    - `image` - object for generating card image
+      - `url` - string for generating image source text
+      - `altText` - string for generating image accessibility text
+      - `src` - string source of image
+    - `gatsbyImage` - boolean for use with image, allows use of GatsbyImage component
+    - `textLink` - object for generating card text CTA
+      - `url` - string for generating CTA href or React Router `to`
+      - `text` - string for generating CTA text
+    - `Link` - optional - either a react-router-dom or gatsby-link component
+    - `button` - optional object for use when a button is desired
+      - `text` - string for generating button text
+      - `url` - string for generating CTA href or React Router `to`
+      - `type` - string for assigning CSS class to button
+    - `displayButton` - boolean for when a button is desired (required to display button)
+    - `bgColor` - string used for determining background-color of card - currently only `grey` is available.
+  - `type` **(required)** - required to render the correct type of block list - e.g. `bounded_cards`
+- `motion` - boolean used to indicate whether or not motion should be used
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const CardImage = "../images/dummy-image.png";
+const content = {
+  type: "bounded_cards",
+  cards: [
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S9 HP",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble Zephyr 3 for GIS",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S5",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "The no nonsense workhorse that works efficiently and dependably while maintaining the highest possible accuracy",
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Yo I am a title! Woooo",
+      displayButton: true,
+      button: {
+        url: "/#",
+        text: "Button",
+      },
+      text:
+        "Uncompromising performance, range, accuracy and speed.",
+    }
+  ],
+  cardAlignment: true,
+};
+
+return (
+  <ListFeat content={content} motion />
+)
+```

package/dist/luna/components/InPageJumpNav/InPageJumpNav.stories.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = exports.ComponentInSitu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InPageJumpNav = _interopRequireDefault(require("./InPageJumpNav"));
+var _InPageJumpNavDocumentation = _interopRequireDefault(require("./InPageJumpNavDocumentation.mdx"));
+var pageSections = [{
+  title: "Overview",
+  link: "overview"
+}, {
+  title: "Uses by Industry",
+  link: "uses"
+}, {
+  title: "Features & Benefits",
+  link: "features"
+}, {
+  title: "Complete Solutions and Lorem Ipsum",
+  link: "solutions"
+}, {
+  title: "Articles",
+  link: "articles"
+}];
+var navTitle = "This page";
+var _default = {
+  component: _InPageJumpNav["default"],
+  title: "MXP Components/In-Page Jump Nav",
+  parameters: {
+    docs: {
+      page: _InPageJumpNavDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1200px",
+      margin: "auto",
+      padding: "0 32px",
+      display: "flex",
+      justifyContent: "flex-end"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_InPageJumpNav["default"], {
+    pageSections: pageSections
+  }));
+};
+exports.Default = Default;
+var ComponentInSitu = function ComponentInSitu() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1200px",
+      margin: "auto",
+      padding: "0 32px",
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "overview",
+    style: {
+      height: "550px",
+      display: "block",
+      backgroundColor: "#003054",
+      color: "#ffffff"
+    }
+  }, "OVERVIEW"), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "uses",
+    style: {
+      height: "550px",
+      display: "block",
+      backgroundColor: "#0E416C",
+      color: "#ffffff"
+    }
+  }, "USES"), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "features",
+    style: {
+      height: "550px",
+      display: "block",
+      backgroundColor: "#0063A3",
+      color: "#ffffff"
+    }
+  }, "FEATURES"), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "solutions",
+    style: {
+      height: "550px",
+      display: "block",
+      backgroundColor: "#4DA2D3",
+      color: "#ffffff"
+    }
+  }, "SOLUTIONS"), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "articles",
+    style: {
+      height: "550px",
+      display: "block",
+      backgroundColor: "#89C6ED",
+      color: "#ffffff"
+    }
+  }, "ARTICLES"), /*#__PURE__*/_react["default"].createElement(_InPageJumpNav["default"], {
+    pageSections: pageSections
+  }));
+};
+exports.ComponentInSitu = ComponentInSitu;

package/dist/luna/components/InPageJumpNav/InPageJumpNavDocumentation.mdx

@@ -0,0 +1,23 @@
+#### In-Page Jump Nav
+
+###### Props -
+
+- `pageSections` - array of objects, each with `title` & `link` as strings to represent the sections on a page.
+
+###### Example -
+
+```
+
+const pageSections = [
+  { title: "Overview", link: "#overview" },
+  { title: "Uses by Industry", link: "#uses" },
+  { title: "Features & Benefits", link: "#features" },
+  { title: "Complete Solutions and Lorem Ipsum", link: "#solutions" },
+  { title: "Articles", link: "#articles" },
+];
+
+
+return (
+	  <InPageJumpNav pageSections={pageSections} />
+);
+```

package/dist/luna/components/JobPosting/JobPosting.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.JobPostingInternational = exports.JobPostingDomestic = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _JobPosting = _interopRequireDefault(require("./JobPosting"));
+var _JobPostingDocumentation = _interopRequireDefault(require("./JobPostingDocumentation.mdx"));
+var content = {
+  id: "566b0a12-33a5-55b8-801f-5065f720bc53",
+  jobPostingId: "JOB_POSTING_TEST",
+  postedDate: "19/08/2021",
+  node_locale: "en-US",
+  title: "Cloud Operations Technical Writer",
+  applyURL: "https://trimble2.wd2.myworkdayjobs-impl.com/TrimbleCareers/job/UK---Ipswich-England/Cloud-Operations-Technical-Writer_R30464/apply",
+  requisitionId: "R30464",
+  jobFamily: "Technical Writing",
+  timeType: "Full Time",
+  supervisoryReference: "",
+  compensationMinimum: 0,
+  compensationMidpoint: 0,
+  bonusEligibility: "",
+  country: "United Kingdom",
+  region: "",
+  municipality: "Ipswich",
+  description: {
+    description: "<div><b>Title: Cloud Operations Technical Writer </b></div><div><b>Location: UK   [Preferred: Ipswich]</b></div><div><b>Department: Trimble Cloud </b><b><i>x</i></b><b>Ops</b></div><div><b>Reports to: Service Delivery Manager</b></div><div> </div><div>Our team accelerates Trimble’s use of public cloud to deliver innovative products and services.  A key shared service offering we provide to Trimble divisions is 24x7 application operations to ensure the availability of their applications.  As Trimble and Trimble Cloud scale to meet growth in digital product delivery across Construction, Transportation, Natural Resources, Geospatial and Automony solutions, we need to ensure the applications operations team has high-quality documentation to follow when restoring service.  While the initial term of this contract is 6 months, it may be extended or converted to full-time employment.</div><div> </div><div>We are looking for you to make Trimble better!</div><div> </div><div><b>Responsibilities</b></div><ul><li><br />Assess existing technical documentation for production application support and create a rationalization plan that encompasses where documents are stored, how they should be structured, how to make the relevant info easy to find, and making sure they are complete.</li><li>Collaborate with Trimble divisions to complete a revision of the existing documentation.</li><li>Create a template or example for new divisions adopting application operation services.</li><li>Identify ways to help ensure documentation is kept up to date.<br /> </li></ul><div> </div><div><b>Required Skills / Experience</b> </div><ul><li><br />Able to quickly understand complex technical processes and translate them into documentation for technicians to use</li><li>Worked in virtual teams to collaborate on content creation</li><li>Detail-oriented with strong organizational skills, and ability to break down larger projects into multiple phases</li><li>Ability to work on multiple tasks in a day</li><li>Strong markup and collaboration skills using Google Apps, Atlassian Confluence or similar</li><li>Designed templates for documentation and ensured consistent look and feel across a suite of documents for quick understanding by the reader</li><li>Strong writing and editorial skills in English, with use of graphics or screenshots as appropriate</li><li>Ability to guide non-native English speakers to assist with the documentation process</li><li>The ability to understand complex technical concepts and clearly communicate them via documentation</li><li>Demonstrated ability to learn new processes and technologies quickly </li><li>Ability to take ownership of projects and define work with little direction after the goals have been established</li><li>Able to occasionally meet off-hours<br /> </li></ul><div> </div><div><b>Desired Skills / Experience</b></div><ul><li><br />Understanding of cloud-based technology and how it works </li><li>Working in agile environments</li><li>Exposure to software-as-a-service-operations or ITIL</li><li>Project management experience or certification</li><li>Configuring document permissions efficiently<br /> </li></ul><div> </div><div>Trimble is transforming the way the world works by delivering products and services that connect the physical and digital worlds. Core technologies in positioning, modeling, connectivity and data analytics enable customers to improve productivity, quality, safety and sustainability. From purpose-built products to enterprise lifecycle solutions, Trimble software, hardware and services are transforming a broad range of industries such as agriculture, construction, geospatial and transportation and logistics.</div><div> </div><div><i>Trimble is proud to be an Equal Opportunity and Affirmative Action Employer and considers qualified applicants for employment without regard to race, gender, age, color, religion, national origin, marital status, disability, sexual orientation, status as a covered veteran in accordance with applicable federal, state and local laws, or any other protected factor. EOE/M/F/V/D</i></div><div> </div><div>#engineering</div><div>#cloud</div><div> </div><div> </div><div>Fixed-term</div><div>Contract-to-hire opportunity</div><div><br /> </div><p><span>Trimble Inc. is proud to be an Equal Opportunity and Affirmative Action Employer and considers qualified applicants for employment without regard to race, gender, age, color, religion, national origin, marital status, disability, sexual orientation, status as a covered veteran in accordance with applicable federal, state and local laws, or any other protected factor. EOE/M/F/V/D</span></p>"
+  },
+  compensationClause: {
+    compensationClause: ""
+  },
+  eeoClause: {
+    eeoClause: "This is an EEO clause."
+  }
+};
+var _default = {
+  component: _JobPosting["default"],
+  title: "MXP Components/Job Posting",
+  parameters: {
+    docs: {
+      page: _JobPostingDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var JobPostingInternational = function JobPostingInternational() {
+  return /*#__PURE__*/_react["default"].createElement(_JobPosting["default"], {
+    content: content
+  });
+};
+exports.JobPostingInternational = JobPostingInternational;
+var JobPostingDomestic = function JobPostingDomestic() {
+  var contentClone = (0, _objectSpread2["default"])({}, content);
+  contentClone.country = "United States";
+  contentClone.region = "Colorado";
+  contentClone.municipality = "Denver";
+  contentClone.description = {
+    description: "<div><b>Title: Cloud Operations Technical Writer </b></div><div><b>Location: UK   [Preferred: Ipswich]</b></div><div><b>Department: Trimble Cloud </b><b><i>x</i></b><b>Ops</b></div><div><b>Reports to: Service Delivery Manager</b></div><div> </div><div>Our team accelerates Trimble’s use of public cloud to deliver innovative products and services.  A key shared service offering we provide to Trimble divisions is 24x7 application operations to ensure the availability of their applications.  As Trimble and Trimble Cloud scale to meet growth in digital product delivery across Construction, Transportation, Natural Resources, Geospatial and Automony solutions, we need to ensure the applications operations team has high-quality documentation to follow when restoring service.  While the initial term of this contract is 6 months, it may be extended or converted to full-time employment.</div><div> </div><div>We are looking for you to make Trimble better!</div><div> </div><div><b>Responsibilities</b></div><ul><li><br />Assess existing technical documentation for production application support and create a rationalization plan that encompasses where documents are stored, how they should be structured, how to make the relevant info easy to find, and making sure they are complete.</li><li>Collaborate with Trimble divisions to complete a revision of the existing documentation.</li><li>Create a template or example for new divisions adopting application operation services.</li><li>Identify ways to help ensure documentation is kept up to date.<br /> </li></ul><div> </div><div><b>Required Skills / Experience</b> </div><ul><li><br />Able to quickly understand complex technical processes and translate them into documentation for technicians to use</li><li>Worked in virtual teams to collaborate on content creation</li><li>Detail-oriented with strong organizational skills, and ability to break down larger projects into multiple phases</li><li>Ability to work on multiple tasks in a day</li><li>Strong markup and collaboration skills using Google Apps, Atlassian Confluence or similar</li><li>Designed templates for documentation and ensured consistent look and feel across a suite of documents for quick understanding by the reader</li><li>Strong writing and editorial skills in English, with use of graphics or screenshots as appropriate</li><li>Ability to guide non-native English speakers to assist with the documentation process</li><li>The ability to understand complex technical concepts and clearly communicate them via documentation</li><li>Demonstrated ability to learn new processes and technologies quickly </li><li>Ability to take ownership of projects and define work with little direction after the goals have been established</li><li>Able to occasionally meet off-hours<br /> </li></ul><div> </div><div><b>Desired Skills / Experience</b></div><ul><li><br />Understanding of cloud-based technology and how it works </li><li>Working in agile environments</li><li>Exposure to software-as-a-service-operations or ITIL</li><li>Project management experience or certification</li><li>Configuring document permissions efficiently<br /> </li></ul><div> </div><div>Trimble is transforming the way the world works by delivering products and services that connect the physical and digital worlds. Core technologies in positioning, modeling, connectivity and data analytics enable customers to improve productivity, quality, safety and sustainability. From purpose-built products to enterprise lifecycle solutions, Trimble software, hardware and services are transforming a broad range of industries such as agriculture, construction, geospatial and transportation and logistics.</div><div> </div><div><i>Trimble is proud to be an Equal Opportunity and Affirmative Action Employer and considers qualified applicants for employment without regard to race, gender, age, color, religion, national origin, marital status, disability, sexual orientation, status as a covered veteran in accordance with applicable federal, state and local laws, or any other protected factor. EOE/M/F/V/D</i></div>"
+  };
+  contentClone.compensationMinimum = "68000";
+  contentClone.compensationMidpoint = "88400";
+  contentClone.bonusEligibility = "Yes";
+  contentClone.benefitsClause = {
+    benefitsClause: "Trimble offers comprehensive core benefits that include Medical, Dental, Vision, Life, Disability, Time off plans and retirement plans.  Most of our businesses also offer tax savings plans for health, dependent care and commuter expenses as well as Paid Parental Leave and Employee Stock Purchase Plan."
+  };
+  contentClone.compensationClause = {
+    compensationClause: "Trimble provides the following compensation range and general description of other compensation and benefits that it in good faith believes it might pay and/or offer for this position. This compensation range is based on a full time schedule.  Trimble reserves the right to ultimately pay more or less than the posted range and offer additional benefits and other compensation, depending on circumstances not related to an applicant’s sex or other status protected by local, state, or federal law."
+  };
+  return /*#__PURE__*/_react["default"].createElement(_JobPosting["default"], {
+    content: contentClone
+  });
+};
+exports.JobPostingDomestic = JobPostingDomestic;

package/dist/luna/components/JobPosting/JobPostingDocumentation.mdx

@@ -0,0 +1,69 @@
+#### Job Posting
+
+###### Props -
+
+- All this is automated and gets queried from Workday.
+
+* content **(required)** - object containing quotes, ctas, button
+  - `description` **(required)** - Object of Description of job posting,
+    - `description` **(required)** - string of HTML of job posting description
+  - `title` **(required)** - String of name of the job
+  - `postedDate` - String of date Posting was posted
+  - `timeType` - String representing full time or part time
+  - `jobFamily` - String representing category/family of job
+  - `applyURL` - String of URL to apply for job
+  - `compensationMidpoint` - String of compensation midpoint. Top of range.
+  - `compensationMinimum` - String pf compensation minimum. Bottom of range.
+  - `bonusEligibility` - String of yes or no
+  - `country` **(required)** - String of Job Country
+  - `region` **(required)** - String of Job (State for US)
+  - `municipality` **(required)** - String of Job municipality (City for US)
+  - `requisitionId` - String of Requisition Id
+  - `benefitsClause` - object consisting of string
+    - `benefitsClause` **(required)** - string of Benefits Clause
+  - `compensationClause` - object consisting of string
+    - `compensationClause` **(required)** - string of compensation Clause
+
+###### Example -
+
+```
+const content = {
+  id: '566b0a12-33a5-55b8-801f-5065f720bc53',
+  jobPostingId: 'JOB_POSTING_TEST',
+  postedDate: '19/08/2021',
+  node_locale: 'en-US',
+  title: 'Cloud Operations Technical Writer',
+  jobPath:
+    'https://trimble2.wd2.myworkdayjobs-impl.com/TrimbleCareers/job/UK---Ipswich-England/Cloud-Operations-Technical-Writer_R30464',
+  applyURL:
+    'https://trimble2.wd2.myworkdayjobs-impl.com/TrimbleCareers/job/UK---Ipswich-England/Cloud-Operations-Technical-Writer_R30464/apply',
+  requisitionReference: '',
+  requisitionId: 'R30464',
+  jobFamily: 'Technical Writing',
+  timeType: 'Full Time',
+  jobType: '',
+  supervisoryReference: '',
+  compensationMinimum: 0,
+  compensationMidpoint: 0,
+  bonusEligibility: '',
+  country: 'United Kingdom',
+  region: '',
+  municipality: 'Ipswich',
+  description: {
+    description:
+      '<div><b>Title: Cloud Operations Technical Writer </b></div><div><b>Location: UK   [Preferred: Ipswich]</b></div><div><b>Department: Trimble Cloud </b><b><i>x</i></b><b>Ops</b></div><div><b>Reports to: Service Delivery Manager</b></div><div> </div><div>Our team accelerates Trimble’s use of public cloud to deliver innovative products and services.  A key shared service offering we provide to Trimble divisions is 24x7 application operations to ensure the availability of their applications.  As Trimble and Trimble Cloud scale to meet growth in digital product delivery across Construction, Transportation, Natural Resources, Geospatial and Automony solutions, we need to ensure the applications operations team has high-quality documentation to follow when restoring service.  While the initial term of this contract is 6 months, it may be extended or converted to full-time employment.</div><div> </div><div>We are looking for you to make Trimble better!</div><div> </div><div><b>Responsibilities</b></div><ul><li><br />Assess existing technical documentation for production application support and create a rationalization plan that encompasses where documents are stored, how they should be structured, how to make the relevant info easy to find, and making sure they are complete.</li><li>Collaborate with Trimble divisions to complete a revision of the existing documentation.</li><li>Create a template or example for new divisions adopting application operation services.</li><li>Identify ways to help ensure documentation is kept up to date.<br /> </li></ul><div> </div><div><b>Required Skills / Experience</b> </div><ul><li><br />Able to quickly understand complex technical processes and translate them into documentation for technicians to use</li><li>Worked in virtual teams to collaborate on content creation</li><li>Detail-oriented with strong organizational skills, and ability to break down larger projects into multiple phases</li><li>Ability to work on multiple tasks in a day</li><li>Strong markup and collaboration skills using Google Apps, Atlassian Confluence or similar</li><li>Designed templates for documentation and ensured consistent look and feel across a suite of documents for quick understanding by the reader</li><li>Strong writing and editorial skills in English, with use of graphics or screenshots as appropriate</li><li>Ability to guide non-native English speakers to assist with the documentation process</li><li>The ability to understand complex technical concepts and clearly communicate them via documentation</li><li>Demonstrated ability to learn new processes and technologies quickly </li><li>Ability to take ownership of projects and define work with little direction after the goals have been established</li><li>Able to occasionally meet off-hours<br /> </li></ul><div> </div><div><b>Desired Skills / Experience</b></div><ul><li><br />Understanding of cloud-based technology and how it works </li><li>Working in agile environments</li><li>Exposure to software-as-a-service-operations or ITIL</li><li>Project management experience or certification</li><li>Configuring document permissions efficiently<br /> </li></ul><div> </div><div>Trimble is transforming the way the world works by delivering products and services that connect the physical and digital worlds. Core technologies in positioning, modeling, connectivity and data analytics enable customers to improve productivity, quality, safety and sustainability. From purpose-built products to enterprise lifecycle solutions, Trimble software, hardware and services are transforming a broad range of industries such as agriculture, construction, geospatial and transportation and logistics.</div><div> </div><div><i>Trimble is proud to be an Equal Opportunity and Affirmative Action Employer and considers qualified applicants for employment without regard to race, gender, age, color, religion, national origin, marital status, disability, sexual orientation, status as a covered veteran in accordance with applicable federal, state and local laws, or any other protected factor. EOE/M/F/V/D</i></div><div> </div><div>#engineering</div><div>#cloud</div><div> </div><div> </div><div>Fixed-term</div><div>Contract-to-hire opportunity</div><div><br /> </div><p><span>Trimble Inc. is proud to be an Equal Opportunity and Affirmative Action Employer and considers qualified applicants for employment without regard to race, gender, age, color, religion, national origin, marital status, disability, sexual orientation, status as a covered veteran in accordance with applicable federal, state and local laws, or any other protected factor. EOE/M/F/V/D</span></p>',
+  },
+  similarJobs: {
+    similarJobs: '',
+  },
+  compensationClause: {
+    compensationClause: '',
+  },
+  eeoClause: {
+    eeoClause: '',
+  },
+};
+
+return (
+  <JobPosting content={content} />
+```

package/dist/luna/{other-organisms → components}/LanguageSelector/LanguageSelector.js

@@ -11,11 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 require("./LanguageSelector.scss");
 var _iconGlobe = _interopRequireDefault(require("../../images/icon-globe.svg"));
 var _checkBlue = _interopRequireDefault(require("../../images/check-blue.svg"));
-var _lodash = require("lodash");
 var _closeIcon = _interopRequireDefault(require("../../images/close-icon.svg"));
 var _rightCaretLightGray = _interopRequireDefault(require("../../images/right-caret-light-gray.svg"));
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
-var _NavBar = require("..//NavBar/NavBar");
+var _NavBar = require("../NavBar/NavBar");
 var _terraOne = require("terra-one");
 var LanguageSelector = function LanguageSelector(_ref) {
   var _currentSettings$lang, _labels$buttons, _labels$buttons2;
@@ -164,7 +163,7 @@ var LanguageSelector = function LanguageSelector(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "luna-language-selector__body-section-item-icon"
     }, region === currentRegion && /*#__PURE__*/_react["default"].createElement("img", {
-      id: (0, _lodash.uniqueId)("id-"),
+      id: (0, _react.useId)(),
       src: _checkBlue["default"],
       alt: "item selected"
     })), /*#__PURE__*/_react["default"].createElement("div", {
@@ -194,7 +193,7 @@ var LanguageSelector = function LanguageSelector(_ref) {
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "luna-language-selector__body-section-item-icon"
     }, (language === null || language === void 0 ? void 0 : language.code) === (currentLanguage === null || currentLanguage === void 0 ? void 0 : currentLanguage.code) && /*#__PURE__*/_react["default"].createElement("img", {
-      id: (0, _lodash.uniqueId)("id-"),
+      id: (0, _react.useId)(),
       src: _checkBlue["default"],
       alt: "item selected"
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/dist/luna/components/LanguageSelector/LanguageSelector.stories.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MultipleRegions = exports.Default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LanguageSelector = _interopRequireDefault(require("./LanguageSelector"));
+var _LanguageSelectorDocumentation = _interopRequireDefault(require("./LanguageSelectorDocumentation.mdx"));
+var _addonActions = require("@storybook/addon-actions");
+var labels = {
+  region: "REGION",
+  language: "LANGUAGE",
+  buttons: {
+    ok: "OK",
+    cancel: "Cancel"
+  }
+};
+var settings = {
+  region: "Global",
+  language: {
+    nativeField: "English",
+    translatableName: "",
+    code: "en"
+  }
+};
+var settingsWithRegion = {
+  region: "North America",
+  language: {
+    nativeField: "English",
+    translatableName: "",
+    code: "en"
+  }
+};
+var oneRegion = ["Global"];
+var multipleRegions = ["Europe", "Middle East", "North America"];
+var languages = [{
+  nativeField: "Deutsch",
+  translatableName: "German",
+  code: "de"
+}, {
+  nativeField: "English",
+  translatableName: "",
+  code: "en"
+}, {
+  nativeField: "Español",
+  translatableName: "Spanish",
+  code: "es"
+}, {
+  nativeField: "Français",
+  translatableName: "French",
+  code: "fr"
+}, {
+  nativeField: "Português",
+  translatableName: "Portuguese",
+  code: "pt"
+}, {
+  nativeField: "Русский",
+  translatableName: "Russian",
+  code: "ru"
+}, {
+  nativeField: "한국어",
+  translatableName: "Korean",
+  code: "ko"
+}, {
+  nativeField: "简体中文",
+  translatableName: "Mandarin Chinese",
+  code: "zh"
+}, {
+  nativeField: "普通话",
+  translatableName: "",
+  code: "tw"
+}, {
+  nativeField: "日本語",
+  translatableName: "Japanese",
+  code: "ja"
+}];
+var _default = {
+  component: _LanguageSelector["default"],
+  title: "Utility Components/Language Selector",
+  parameters: {
+    docs: {
+      page: _LanguageSelectorDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    languageSelectorDeployed = _useState2[0],
+    setLanguageSelectorDeployed = _useState2[1];
+  var handleLanguageSelectorDeployed = function handleLanguageSelectorDeployed(languageDeployed) {
+    setLanguageSelectorDeployed(languageDeployed === undefined ? !languageSelectorDeployed : languageDeployed);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_LanguageSelector["default"], {
+    labels: labels,
+    settings: settings,
+    languages: languages,
+    regions: oneRegion,
+    languageSelectorDeployed: languageSelectorDeployed,
+    saveLanguage: (0, _addonActions.action)("saveLanguage"),
+    handleLanguageSelectorDeployed: handleLanguageSelectorDeployed
+  });
+};
+exports.Default = Default;
+var MultipleRegions = function MultipleRegions() {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    languageSelectorDeployed = _useState4[0],
+    setLanguageSelectorDeployed = _useState4[1];
+  var handleLanguageSelectorDeployed = function handleLanguageSelectorDeployed(languageDeployed) {
+    setLanguageSelectorDeployed(languageDeployed === undefined ? !languageSelectorDeployed : languageDeployed);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_LanguageSelector["default"], {
+    labels: labels,
+    settings: settingsWithRegion,
+    languages: languages,
+    regions: multipleRegions,
+    languageSelectorDeployed: languageSelectorDeployed,
+    saveLanguage: (0, _addonActions.action)("saveLanguage"),
+    handleLanguageSelectorDeployed: handleLanguageSelectorDeployed
+  });
+};
+exports.MultipleRegions = MultipleRegions;

package/dist/luna/components/LanguageSelector/LanguageSelectorDocumentation.mdx

@@ -0,0 +1,120 @@
+#### Language Selector
+
+###### Props -
+
+- `labels` - object containing component labels.
+	- `region` - string of region section title.
+	- `language` - string of language section title.
+	- `buttons` - object containing buttons labels.
+		- `ok` - string of confirm button.
+  	- `cancel` - string of cancel button.
+- `settings` - object containing region and language site settings.
+	- `region` - string to indicate the site region name.
+	- `language` - object containing the site language names.
+		- `nativeField` - string to indicate the language in its native language, untranslatable, i.e. Deutsch.
+		- `translatableName` - string to indicate the language in english, i.e. German.
+  	- `code` - string of the language site code.
+- `languages` - array of objects, each with `nativeField`, `translatableName` and `code` as strings to represent the language attributes.
+- `regions` - array of strings, each to represent the regions name.
+- `languageSelectorDeployed` - boolean used to indicate if the language selector component is deployed.
+- `handleLanguageSelectorDeployed` - method used to show/hide the language selector component.
+- `saveLanguage` - method used to save the new language configuration selected.
+
+###### Example -
+
+```
+const labels = {
+  region: 'REGION',
+  language: 'LANGUAGE',
+  buttons: {
+    ok: 'OK',
+    cancel: 'Cancel',
+  }
+};
+
+const settings = {
+  region: 'Global',
+  language: {
+    nativeField: 'English',
+    translatableName: '',
+    code: 'en-US',
+  },
+};
+
+const regions = ['Europe', 'Middle East', 'North America'];
+
+const languages = [
+  {
+    nativeField: 'Deutsch',
+    translatableName: 'German',
+    code: 'de',
+  },
+  {
+    nativeField: 'English',
+    translatableName: '',
+    code: 'en-US',
+  },
+  {
+    nativeField: 'Español',
+    translatableName: 'Spanish',
+    code: 'es',
+  },
+  {
+    nativeField: 'Français',
+    translatableName: 'French',
+    code: 'fr',
+  },
+  {
+    nativeField: 'Português',
+    translatableName: 'Portuguese',
+    code: 'pt',
+  },
+  {
+    nativeField: 'Русский',
+    translatableName: 'Russian',
+    code: 'ru-RU',
+  },
+  {
+    nativeField: '한국어',
+    translatableName: 'Korean',
+    code: 'ko-KR',
+  },
+  {
+    nativeField: '简体中文',
+    translatableName: 'Mandarin Chinese',
+    code: 'zh',
+  },
+  {
+    nativeField: '普通话',
+    translatableName: '',
+    code: 'zh-Hant-TW',
+  },
+  {
+    nativeField: '日本語',
+    translatableName: 'Japanese',
+    code: 'ja-JP',
+  }
+];
+
+const [languageSelectorDeployed, setLanguageSelectorDeployed] = useState(false);
+
+const handleLanguageSelectorDeployed = () => {
+  setLanguageSelectorDeployed(!languageSelectorDeployed);
+};
+
+const saveLanguage = () => {
+  // save language implementation here
+}
+
+return (
+	  <LanguageSelector
+      labels={labels}
+      settings={settings}
+      languages={languages}
+      regions={regions}
+      languageSelectorDeployed={languageSelectorDeployed}
+      saveLanguage={saveLanguage}
+      handleLanguageSelectorDeployed={handleLanguageSelectorDeployed}
+    />
+);
+```