feat(SkipNavigation): add label props

kiwicom · Apr 18, 2023 · 90f8e65 · 90f8e65
1 parent c5499f7
commit 90f8e65
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/packages/orbit-components/src/SkipNavigation/README.md b/packages/orbit-components/src/SkipNavigation/README.md
@@ -6,7 +6,7 @@ To implement the SkipNavigation component into your project you'll need to add t
 import SkipNavigation from "@kiwicom/orbit-components/lib/SkipNavigation";
 ```
 
-After adding import in your project you can use it simply like:
+After adding import to your project you can use it simply like:
 
 ```jsx
 <SkipNavigation />
@@ -18,11 +18,14 @@ After adding import in your project you can use it simply like:
 
 The table below contains all types of props available in the SkipNavigation component.
 
-| Name          | Type                    | Default         | Description                                  |
-| :------------ | :---------------------- | :-------------- | -------------------------------------------- |
-| feedbackUrl   | `string`                | `Send feedback` | Url to a feedback form.                      |
-| feedbackLabel | `React.Node`            |                 | Text for a feedback form.                    |
-| **actions**   | [`Actions[]`](#actions) |                 | An array specifying common actions on a page |
+| Name              | Type                    | Default           | Description                                  |
+| :---------------- | :---------------------- | :---------------- | -------------------------------------------- |
+| feedbackUrl       | `string`                |                   | Url to a feedback form.                      |
+| feedbackLabel     | `React.Node`            | `Send feedback`   | Text for a feedback form.                    |
+| **actions**       | [`Actions[]`](#actions) |                   | An array specifying common actions on a page |
+| dataTest          | `string`                |                   | Optional prop for testing purposes           |
+| firstSectionLabel | `React.Node`            | `Jump to section` | Label for a first section link.              |
+| firstActionLabel  | `React.Node`            | `Jump to action`  | Label for a first action link.               |
 
 ## actions
 

diff --git a/packages/orbit-components/src/SkipNavigation/index.js.flow b/packages/orbit-components/src/SkipNavigation/index.js.flow
@@ -20,6 +20,8 @@ export type MappedOptions = {|
 export type Props = {|
   actions?: Actions[],
   feedbackUrl?: string,
+  firstSectionLabel?: React.Node,
+  firstActionLabel?: React.Node,
   feedbackLabel: React.Node,
 |};
 

diff --git a/packages/orbit-components/src/SkipNavigation/index.tsx b/packages/orbit-components/src/SkipNavigation/index.tsx
@@ -40,10 +40,16 @@ const StyledSelectWrapper = styled.div`
   max-width: 800px;
 `;
 
-const SkipNavigation = ({ actions, feedbackUrl, feedbackLabel = "Send feedback" }: Props) => {
+const SkipNavigation = ({
+  actions,
+  feedbackUrl,
+  feedbackLabel = "Send feedback",
+  firstSectionLabel = "Jump to section",
+  firstActionLabel = "Common actions",
+}: Props) => {
   const [links, setLinks] = React.useState<HTMLAnchorElement[]>([]);
   const [mappedLinks, setMappedLinks] = React.useState<MappedOptions[]>([]);
-  const [innerPages, setPages] = React.useState<{ value: number; label?: string }[]>([]);
+  const [innerPages, setPages] = React.useState<{ value: number; label?: React.ReactNode }[]>([]);
   const [show, setShow] = React.useState(false);
 
   const handleLinksClick = (ev: React.SyntheticEvent<HTMLSelectElement>) => {
@@ -76,7 +82,7 @@ const SkipNavigation = ({ actions, feedbackUrl, feedbackLabel = "Send feedback"
       const mappedSections = [
         {
           value: 0,
-          label: "Jump to section", // TODO: Dictionary
+          label: firstSectionLabel,
         },
         ...Object.keys(selectedLinks).map(key => ({
           value: Number(key) + 1,
@@ -94,7 +100,7 @@ const SkipNavigation = ({ actions, feedbackUrl, feedbackLabel = "Send feedback"
         const mappedPages = [
           {
             value: 0,
-            label: "Common actions", // TODO: Dictionary
+            label: firstActionLabel,
           },
           ...actions.map((el, i) => {
             return { value: i + 1, label: el.name };

diff --git a/packages/orbit-components/src/SkipNavigation/types.d.ts b/packages/orbit-components/src/SkipNavigation/types.d.ts
@@ -12,12 +12,14 @@ interface Action {
 export interface Props {
   readonly actions?: Action[];
   readonly feedbackUrl?: string;
+  readonly firstSectionLabel?: React.ReactNode;
+  readonly firstActionLabel?: React.ReactNode;
   readonly feedbackLabel?: React.ReactNode;
 }
 
 export interface MappedOptions {
   readonly key?: string;
   readonly value: string | number;
-  readonly label?: string;
+  readonly label?: React.ReactNode;
   readonly disabled?: boolean;
 }